使用 JavaScript 从元素中删除 CSS 样式属性

作者

从元素中移除 CSS 样式属性

Remove CSS Style Property from an Element using JavaScript

使用该style.removeProperty()方法从元素中删除 CSS 样式属性。

该removeProperty()方法从元素中删除提供的 CSS 样式属性。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div
      id="box"
      style="background-color: yellow; color: red; width: 100px; height: 100px"
    >
      Box 1
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

// ✅ Remove CSS properties
box.style.removeProperty('width');
box.style.removeProperty('height');
box.style.removeProperty('background-color');

// ✅ Set CSS Properties
// box.style.setProperty('background-color', 'salmon');

我们使用
style.removeProperty
方法从元素中删除 CSS 属性。

请注意，多词属性名称是带连字符的，而不是驼峰式的。

为元素添加 CSS 样式属性

如果需要向元素添加 CSS 样式属性，请使用
style.setProperty方法。

索引.js
const box = document.getElementById('box');

// ✅ Set CSS Properties
box.style.setProperty('background-color', 'salmon');

该style.setProperty方法设置或更新 DOM 元素上的 CSS 样式属性。

或者，您可以使用更直接的方法。

从元素中删除 CSS 样式属性，方法是将其设置为null

您还可以通过将属性设置为一个值来从元素中删除 CSS 样式属性null，例如box.style.backgroundColor = null;。

当元素的 CSS 属性设置为 时null，该属性将从元素中移除。

索引.js
const box = document.getElementById('box');

// ✅ Remove CSS properties
box.style.backgroundColor = null;
box.style.width = null;

// ✅ Set CSS Properties
// box.style.backgroundColor = 'coral';

我们可以访问元素对象的 CSS 属性style。

请注意，在使用这种方法时，我们使用驼峰式命名，而不是使用连字符连接属性名称，例如，backgroundColor而不是. background-color

该style对象允许我们读取、设置和更新元素上 CSS 属性的值。

如果要在元素上设置 CSS 属性，请将属性设置为null.

索引.js
const box = document.getElementById('box');

// ✅ Set CSS Properties
box.style.backgroundColor = 'coral';

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：