HTML DOM style 属性

简介

DOM (Document Object Model) 是一种编程接口，用于处理文档。每个元素都是一个节点，可以使用JavaScript来操作这些节点。style 属性允许我们通过JavaScript来动态地改变元素的样式。

获取和设置样式

获取样式

可以通过 element.style 来获取或设置元素的内联样式。需要注意的是，这仅适用于通过内联样式（例如 <div style="color: red;"></div>）定义的样式，而不是通过 CSS 文件或 <style> 标签定义的样式。

let element = document.getElementById('myElement');
console.log(element.style.color); // 输出 "red"

设置样式

可以使用 .style 属性来设置元素的内联样式。这里需要注意，当设置样式时，属性名需要用驼峰式命名法（camelCase），而不是 CSS 中使用的连字符命名法（kebab-case）。

let element = document.getElementById('myElement');
element.style.color = 'blue';

可用的CSS属性

常见属性

• color: 文本颜色。
• backgroundColor: 背景颜色。
• fontSize: 字体大小。
• fontWeight: 字体粗细。
• display: 元素的显示类型（如 block, inline, none）。
• visibility: 元素的可见性（visible, hidden）。
• opacity: 元素的透明度。
• width: 元素宽度。
• height: 元素高度。
• margin: 边距。
• padding: 内边距。
• border: 边框。

示例

// www.javascriptcn.com code example
<div id="example">这是一个示例</div>
<script>
  let example = document.getElementById('example');
  example.style.color = 'red';
  example.style.backgroundColor = 'yellow';
  example.style.fontSize = '20px';
  example.style.fontWeight = 'bold';
  example.style.display = 'block';
  example.style.visibility = 'hidden';
  example.style.opacity = '0.5';
  example.style.width = '100px';
  example.style.height = '50px';
  example.style.margin = '10px';
  example.style.padding = '5px';
  example.style.border = '1px solid black';
</script>

访问计算样式

虽然 element.style 只能访问到内联样式的值，但有时我们需要获取元素的实际样式（包括浏览器应用的所有CSS规则）。这时可以使用 window.getComputedStyle() 方法。

let element = document.getElementById('myElement');
let computedStyle = window.getComputedStyle(element);
console.log(computedStyle.color); // 输出实际的颜色值，可能与内联样式不同

动态样式修改

使用JavaScript动态修改样式

通过JavaScript可以动态地修改元素的样式，这在响应用户交互或根据某些条件改变页面外观时非常有用。

document.querySelector('button').addEventListener('click', function() {
  let element = document.getElementById('myElement');
  element.style.color = 'green';
});

使用类切换样式

另一种常见的做法是使用类名来管理样式，这样可以避免直接操作内联样式，使代码更易于维护。

// www.javascriptcn.com code example
<style>
  .highlight { color: orange; }
</style>
<div id="example">这是一个示例</div>
<button onclick="toggleHighlight()">切换高亮</button>
<script>
  function toggleHighlight() {
    let element = document.getElementById('example');
    element.classList.toggle('highlight');
  }
</script>

总结

style 属性提供了一种通过JavaScript动态改变元素样式的简便方法。尽管它只能访问内联样式，但结合 getComputedStyle() 方法，可以实现对元素实际样式的访问。此外，使用类名来管理样式可以提高代码的可维护性和复用性。

以上就是关于HTML DOM style 属性的详细介绍。希望对你有所帮助！