"本文介绍了如何使用JavaScript操作DOM元素，包括添加类（.red）、移除类（.red）、检测类存在（contains("red")）以及切换类样式（toggle("red")）。通过实例演示了如何在网页中动态控制CSS样式。"
给当前元素添加类样式
语法
Element.classList.add("类名");
示例
test.red {
color: red;
}
改变样式
document.querySelector("#change").onclick = function()
{
document.querySelector("#username").classList.add("red");
}
给当前元素移除类样式
语法
Element.classList.remove("类名");
示例
test.red {
color: red;
}
改变样式
document.querySelector("#change").onclick = function()
{
document.querySelector("#username").classList.remove("red");
}
检测当前元素添是否包含类样式
语法
Element.classList.contains("类名");
示例
test.red {
color: red;
}
.blue {
color: blue;
}
改变样式
var selector = document.querySelector("#username");
document.querySelector("#change").onclick = function()
{
if (selector.classList.contains("red")) {
selector.classList.remove("red");
selector.classList.add("blue");
}
}
给当前元素切换类样式：有就删除，没有就添加
语法
Element.classList.toggle("类名");
示例
test.red {
color: red;
}
改变样式
document.querySelector("#change").onclick = function()
{
document.querySelector("#username").classList.toggle("red");
}
扫一扫
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
