HTML | DOM 样式列属性

HTML（超文本标记语言）是用于创建Web页面内容的语言，而DOM（文档对象模型）是用于对HTML文档进行编程的API（应用程序接口）。样式属性是用于在HTML元素上设置样式的属性。在本文中，我们将了解HTML | DOM中的样式列属性。

HTML中的样式属性

HTML中的样式属性用于直接在HTML元素上设置样式。以下是一些常用的HTML样式属性：

• style：用于设置CSS样式规则
• class：用于定义一个或多个元素的类名
• id：用于定义元素的唯一标识符

以下是一些HTML样式属性的示例代码：

<!-- 设置元素的背景颜色和字体颜色 -->
<div style="background-color: yellow; color: red;">Hello World!</div>

<!-- 定义一个类，并将其应用于一个元素 -->
<style>
  .my-class {
    background-color: blue;
    color: white;
  }
</style>
<div class="my-class">Hello World!</div>

<!-- 给一个元素一个唯一的ID -->
<div id="my-element">Hello World!</div>

DOM中的样式属性

DOM提供了几种属性来访问和修改元素的样式。以下是一些核心DOM属性：

• style：一个包含元素CSS样式属性值的对象
• className：包含元素类名的字符串
• id：元素的唯一标识符

以下是一些DOM样式属性的示例代码：

<div id="my-element">Hello World!</div>

<script>
  // 获取元素的style对象并将其添加背景颜色样式
  var myElement = document.getElementById('my-element');
  myElement.style.backgroundColor = 'yellow';

  // 将元素类名设置为my-class
  myElement.className = 'my-class';
</script>

总结

样式属性是用于在HTML元素上设置样式的属性。HTML中的样式属性用于直接在HTML元素上设置样式，而DOM中的样式属性用于通过编程来访问和修改元素的样式。无论您是在HTML中设置样式还是在DOM中，都有多种选项可用于设置元素样式，以使其看起来更好并创造更好的用户体验。

参考资料

• MDN Web 文档：样式属性（CSS）