简介
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: 边框。
示例
-- -------------------- ---- ------- ---- ------------------------- -------- --- ------- - ----------------------------------- ------------------- - ------ ----------------------------- - --------- ---------------------- - ------- ------------------------ - ------- --------------------- - -------- ------------------------ - --------- --------------------- - ------ ------------------- - -------- -------------------- - ------- -------------------- - ------- --------------------- - ------ -------------------- - ---- ----- ------- ---------
访问计算样式
虽然 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';
});使用类切换样式
另一种常见的做法是使用类名来管理样式，这样可以避免直接操作内联样式，使代码更易于维护。
-- -------------------- ---- -------
-------
---------- - ------ ------- -
--------
---- -------------------------
------- -----------------------------------------
--------
-------- ----------------- -
--- ------- - -----------------------------------
--------------------------------------
-
---------总结
style 属性提供了一种通过JavaScript动态改变元素样式的简便方法。尽管它只能访问内联样式，但结合 getComputedStyle() 方法，可以实现对元素实际样式的访问。此外，使用类名来管理样式可以提高代码的可维护性和复用性。
以上就是关于HTML DOM style 属性的详细介绍。希望对你有所帮助！