1. 原生 javascript 如何给 body 元素添加或者删除某个样式
在原生 JavaScript 中,你可以通过多种方式给<body>
元素添加或删除样式。以下是几种常见的方法:
1.1. 添加样式
1. 直接修改 style 属性:
你可以直接访问并修改body
元素的style
属性来添加内联样式。
// 添加单一样式 document.body.style.backgroundColor = "lightblue"; // 同时添加多个样式 Object.assign(document.body.style, { backgroundColor: "lightblue", fontSize: "20px", });
2. 使用 setAttribute 方法:setAttribute
可以用来设置元素的任何属性,包括style
。
document.body.setAttribute( "style", "background-color: lightblue; font-size: 20px;" );
3. 切换 CSS 类:
更推荐的方式是通过添加或移除 CSS 类来改变样式,这样可以保持 HTML 和 CSS 分离,并且更容易维护。
// 添加一个CSS类 document.body.classList.add("new-style"); // 删除一个CSS类 document.body.classList.remove("new-style"); // 切换一个CSS类(如果存在则移除,如果不存在则添加) document.body.classList.toggle("new-style");
1.2. 删除样式
1. 直接删除 style 属性中的某个样式:
如果样式是通过style
属性直接添加的,可以通过设置为null
或空字符串来移除特定的样式。
// 移除单一样式 document.body.style.backgroundColor = null; // 或者 ''
2. 使用 removeProperty 方法:
可以使用removeProperty()
方法来移除指定的内联样式。
document.body.style.removeProperty("background-color");
3. 移除 CSS 类:
如果样式是通过 CSS 类应用的,可以使用classList.remove()
来移除相应的类。
document.body.classList.remove("new-style");
4. 清除所有内联样式:
如果想要移除所有内联样式,可以直接将style
属性设为空字符串。
document.body.style.cssText = "";
以上就是在原生 JavaScript 中给<body>
元素添加或删除样式的一些常见做法。根据实际需求选择最适合的方法。
如果你想要确保样式优先级或者需要动态地根据条件来添加/移除样式,通常推荐使用 CSS 类的方式。