如何切换按钮onClick的外观？

要切换按钮onClick的外观，可以通过使用CSS样式和JavaScript来实现。下面是一个示例代码：

HTML部分：

<button id="myButton" onclick="changeAppearance()">点击切换外观</button>

CSS部分：

.button-default {
  background-color: #4CAF50;
  color: white;
}

.button-alternate {
  background-color: #f44336;
  color: white;
}

JavaScript部分：

function changeAppearance() {
  var button = document.getElementById("myButton");
  if (button.classList.contains("button-default")) {
    button.classList.remove("button-default");
    button.classList.add("button-alternate");
  } else {
    button.classList.remove("button-alternate");
    button.classList.add("button-default");
  }
}

上述代码中，我们首先在HTML中创建了一个按钮，并为其添加了一个唯一的id和一个onClick事件。接着，在CSS中定义了两种不同的按钮外观样式，分别为button-default和button-alternate。在JavaScript中，我们创建了一个changeAppearance()函数，用于切换按钮的外观。该函数首先通过getElementById()方法获取到按钮的引用，然后使用classList属性对按钮的类进行操作，如果按钮的类包含button-default，则将其移除，并添加button-alternate类，反之亦然。

通过这种方式，我们可以在按钮被点击时切换其外观，从而实现按钮外观的动态变化效果。

腾讯云相关产品和产品介绍链接地址：