css两个切换按钮

发表于前端技术学习版块 css,教程

CSS两个切换按钮能实现不同的样式切换，从而优化网页的外观。使用这种技术，你可以让两个按钮在不同的网页元素中切换样式。/* 初始样式 */ .my-style { color: red; font-s

CSS两个切换按钮能实现不同的样式切换，从而优化网页的外观。使用这种技术，你可以让两个按钮在不同的网页元素中切换样式。

/* 初始样式 */
.my-style {
  color: red;
  font-size: 16px;
}

/* 切换样式 */
.my-style.active {
  color: blue;
  font-size: 20px;
}

/* 按钮样式 */
button {
  background-color: gray;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

button.active {
  background-color: blue;
}

以上代码描述了一个简单的例子：一个样式类“my-style”和两个按钮，一个激活“my-style”类，另一个停用它。第一个按钮改变文本颜色和字体大小，第二个按钮还原到默认样式。

在HTML中，你需要添加两个按钮和一个需要样式切换的元素：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="my-style">
      <p>This is a paragraph with the style.</p>
    </div>
    
    <button id="activate-style">Activate style</button>
    <button id="deactivate-style">Deactivate style</button>
    
    <script>
      var activateButton = document.querySelector("#activate-style");
      var deactivateButton = document.querySelector("#deactivate-style");
      var styledElement = document.querySelector(".my-style");
      
      activateButton.addEventListener("click", function() {
        styledElement.classList.add("active");
        activateButton.classList.add("active");
        deactivateButton.classList.remove("active");
      });
      
      deactivateButton.addEventListener("click", function() {
        styledElement.classList.remove("active");
        deactivateButton.classList.add("active");
        activateButton.classList.remove("active");
      });
    </script>
  </body>
</html>

这里还需要JavaScript代码，它像按钮一样侦听click事件，从而激活或停用样式切换。例如，在点击“激活样式”按钮时，JavaScript代码需要添加“active”类来激活样式。

总的来说，CSS样式切换技术可以使网页外观更加灵活，因为用户可以选择其中一个样式或另一个样式。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。