原生DOM操作样式指南

2024-01-24 00:24:51

到目前为止，我们已经学习了DOM中的三个核心对象，Document、Node、Element，但是我们发现，这说的核心对象都是操作HTML标签的，页面中的主要有两个静态内容，一个是标签结构是静态的，另一个就是样式。

对于静态的结构标签，我们经常使用上面提到的三个核心对象中的方法来操作，但是面对样式的内容，我们一般是使用CSS样式来定义页面元素的样式内容，然后通过追加到HTML标签中来引用样式，那么我们能否像操作结构标签一样，通过原生DOM来操作样式内容吗？

答案是肯定的，在DOM中，对于样式内容，有一个样式对象(style)，我们知道，每个元素都有一个样式，那么对于这个元素的样式，我们就可以用style来访问或修改，下面来看看原生DOM对style对象的定义：

cssText： 字符串，返回或设置样式元素的所有声明（例如，"width:100px;color:red;"）。该属性不区分大小写。
length： 整数，返回style对象中声明的数量。只读。
parentRule： CSSRule对象。返回包含此声明的CSS规则。在CSS规则中定义声明的样式规则可以通过此属性访问。如果没有定义包含声明的样式规则，则此属性为null。
item()： 字符串，返回声明的文本值，而不是该属性的值。如果声明不存在，则返回空字符串。
getPropertyValue(propertyName)： 字符串，返回指定属性值的当前设置。如果没有指定该属性，则返回空字符串。
getPropertyPriority(propertyName)： 字符串，返回指定属性的优先级。返回的优先级可能是字符串"inherit"、"important"或空字符串。如果没有指定该属性，则返回空字符串。
removeProperty(propertyName)： void，从元素中删除指定的属性。如果属性不存在，则此方法无效。
setProperty(propertyName, propertyValue, propertyPriority)： void，设置或修改指定属性的值。如果属性不存在，则创建它。如果属性已存在，则修改它的值。如果省略priority参数，则属性的优先级设置为"普通"。

通过style对象，我们可以对元素的样式属性进行操作，更重要的是，我们可以对行内样式进行操作。我们知道，行内样式是CSS样式的一种表现形式，当页面中同时存在内联样式和外部样式时，行内样式将覆盖外部样式，如下面的代码所示：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      color: red;
    }
  </style>
</head>
<body>
  <div style="color: blue;">我是行内样式</div>
</body>
</html>

在这个页面中，外部样式定义了body元素的color属性为红色，但是由于div元素使用了内联样式，并且将color属性设置为蓝色，因此，div元素的颜色将显示为蓝色。

我们使用style对象对行内样式进行操作，可以达到修改页面元素样式的目的，下面是一个使用style对象修改行内样式的示例：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="div1" style="color: blue;">我是行内样式</div>

  <script>
    var div1 = document.getElementById("div1");
    div1.style.color = "red";
  </script>
</body>
</html>