使用 JavaScript 从元素中删除所有样式

Remove all Styles from an Element using JavaScript

使用该removeAttribute()方法从元素中删除所有样式，例如
box.removeAttribute('style'). 该removeAttribute方法将从元素中删除
style属性。

以下是本文示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .bg-salmon {
        background-color: salmon;
      }
    </style>
  </head>

  <body>
    <div id="box" style="width: 100px; height: 100px" class="bg-salmon">
      Box 1
    </div>

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

这是相关的 JavaScript 代码。

索引.js


const box = document.getElementById('box');

// ✅ Remove all Styles from Element
box.removeAttribute('style');

// ✅ Remove specific style from Element
box.style.width = null;

// ✅ Remove all classes from element
// box.removeAttribute('class');

我们使用
Element.removeAttribute
方法style从元素中移除属性。

该方法采用的唯一参数是我们要删除的属性的名称。

如果元素上不存在该属性，则该removeAttribute()方法不会抛出错误，它只是返回undefined。

如果要从元素的样式中删除特定的 CSS 属性，请将该属性设置为null.

索引.js


const box = document.getElementById('box');

// ✅ Remove specific style from Element
box.style.width = null;

// ✅ Multi word properties are camel-cased
box.style.backgroundColor = null;

相反，如果您需要更新或设置特定的 CSS 属性，请将其设置为不是null.

索引.js


const box = document.getElementById('box');

// ✅ Remove specific style from Element
box.style.width = '200px';

如果需要从元素中删除所有类，请使用removeAttribute()
方法。

索引.js


const box = document.getElementById('box');

// ✅ Remove all classes from element
box.removeAttribute('class');

–