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