HTML DOM（文档对象模型）中的Style对象是用来操作和控制HTML元素的样式的对象。通过Style对象，你可以动态地改变元素的样式属性，比如颜色、大小、位置等。

以下是一些Style对象的常用属性和方法：

常用属性：

1. style.cssText:
   - 获取或设置元素的内联样式，以字符串形式表示。
   var elementStyle = document.getElementById("myElement").style;
   elementStyle.cssText = "color: red; font-size: 16px;";

2. style.property:
   - 通过属性名直接访问或设置元素的样式属性。
   var elementStyle = document.getElementById("myElement").style;
   elementStyle.color = "blue";
   elementStyle.fontSize = "20px";

常用方法：

1. setProperty(property, value, priority):
   - 设置元素的指定样式属性。
   var elementStyle = document.getElementById("myElement").style;
   elementStyle.setProperty("color", "green", "important");

2. removeProperty(property):
   - 移除元素的指定样式属性。
   var elementStyle = document.getElementById("myElement").style;
   elementStyle.removeProperty("font-size");

示例：
<!DOCTYPE html>
<html>
<head>
  <title>Style对象示例</title>
  <style>
    #myElement {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="myElement">这是一个示例元素</div>

<script>
  // 获取元素的Style对象
  var elementStyle = document.getElementById("myElement").style;

  // 修改样式属性
  elementStyle.color = "blue";
  elementStyle.fontSize = "20px";

  // 设置cssText
  elementStyle.cssText = "border: 2px solid red; padding: 10px;";

  // 设置属性（带!important）
  elementStyle.setProperty("font-weight", "bold", "important");

  // 移除属性
  elementStyle.removeProperty("background-color");
</script>

</body>
</html>

上述示例演示了如何使用Style对象来修改元素的样式属性。你可以根据需要使用这些属性和方法来动态地操作HTML元素的外观。


转载请注明出处：http://www.zyzy.cn/article/detail/4430/HTML