HTML DOM Style 对象

HTML DOM Style 对象代表 HTML 元素的样式属性。在 JavaScript 中，我们可以使用 HTML DOM Style 对象来操作元素的样式属性，包括颜色、宽度、高度、字体、边距等等。下面是一个HTML元素的样式属性示例：

<div id="example" style="background-color: blue; width: 200px; height: 200px; font-size: 20px;">Hello World!</div>

我们可以使用以下代码来获取该元素的 HTML DOM Style 对象：

let element = document.getElementById("example");
let style = element.style;

HTML DOM Style 对象属性

HTML DOM Style 对象的属性可以让我们获取或设置元素的样式属性，属性有上百种，这里只列举一些经常使用的：

backgroundColor

backgroundColor 属性用来设置或返回元素的背景颜色。该属性接受任何可用的 CSS 颜色值，比如以下颜色：

• red
• blue
• #FFFFFF
• rgb(255, 0, 0)

style.backgroundColor = "red";
let backgroundColor = style.backgroundColor; // 返回 "red"

color

color 属性用来设置或返回元素的文本颜色。与 backgroundColor 类似，color 属性也可以接受任何可用的 CSS 颜色值。

style.color = "blue";
let color = style.color; // 返回 "blue"

minWidth

minWidth 属性用来设置或返回元素的最小宽度。该属性接受任何可接受的 CSS 长度值或百分比。

style.minWidth = "100px";
let minWidth = style.minWidth; // 返回 "100px"

fontSize

fontSize 属性用来设置或返回元素的字体大小。该属性接受任何可接受的 CSS 长度值或百分比。

style.fontSize = "20px";
let fontSize = style.fontSize; // 返回 "20px"

HTML DOM Style 对象方法

HTML DOM Style 对象也提供了一些有用的方法。

getPropertyValue()

getPropertyValue() 方法用来获取元素的某个 CSS 属性的值。该方法接受一个字符串作为参数，表示 CSS 属性名，返回该属性的值。

let backgroundColor = style.getPropertyValue("background-color"); // 返回 "red"

setProperty()

setProperty() 方法用来设置元素的某个 CSS 属性的值。该方法接受两个参数：第一个参数表示属性名，第二个参数表示属性值。

style.setProperty("background-color", "red");

总结

HTML DOM Style 对象是 JavaScript 操作 HTML 样式的重要对象之一。通过它，我们可以获取或设置元素的样式属性。HTML DOM Style 对象提供的属性和方法多达上百个，我们可以根据实际需要进行学习和使用。同时我们还可以将样式属性写在CSS中，通过设置元素的class名称和id名称来间接更改样式，来提高代码的可读性。