<html>
<head>
</head>
<body>
<p>First</p>
<p style="color: green;">Second</p>
<p id="para">Third</p>
</body>
</html>
样式属性
DOM 元素具有一个名为 style 的属性,该属性返回一个表示 HTML 元素 style 属性的对象。通过使用 JavaScript 定义这些属性,就可以修改元素的属性。下面的代码修改了第一段的文本颜色和边距。
const paragraphElement = document.querySelector("p");
paragraphElement.style.color = "red";
paragraphElement.style.margin = "50px";
复合 CSS 属性
由两个单词组成,例如 fontFamily 、backgroundColor。
// ...
paragraphElement.style.fontFamily = "Arial";
paragraphElement.style.backgroundColor = "black";
style 属性的限制
尝试显示每个段落的文本颜色:
const paragraphElements = document.getElementsByTagName("p");
console.log(paragraphElements[0].style.color); // "red"
console.log(paragraphElements[1].style.color); // "green"
console.log(paragraphElements[2].style.color); // Show an empty string
我们发现第三段的颜色无法显示,因为我们无法访问在别处定义的样式声明(这里是在 css 文件中定义的)。
访问元素方式
访问元素样式的更好的解决方案是使用 getComputedStyle() 函数。该函数将 DOM 节点作为参数,并返回第一个表示元素样式的对象。
const paragraphStyle = getComputedStyle(document.getElementById("para"));
console.log(paragraphStyle.fontStyle); // "italic"
console.log(paragraphStyle.color); // color blue in RGB values