[分享]css两个切换按钮

发布于 2024-11-11 19:06:16

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

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样式切换技术可以使网页外观更加灵活，因为用户可以选择其中一个样式或另一个样式。

css 教程

一个月内的热帖推荐

[分享]css两个切换按钮

91云脑