原生javascript 如何给body元素添加或者删除某个样式

www.jswusn.com JS 2025-06-11 09:46:12 4次浏览

1. 原生 javascript 如何给 body 元素添加或者删除某个样式

在原生 JavaScript 中,你可以通过多种方式给<body>元素添加或删除样式。以下是几种常见的方法:

1.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. 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 类的方式。


技术分享

苏南名片

  • 联系人:吴经理
  • 电话:152-1887-1916
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2025 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号