HTML DOM允许JavaScript获取和更改HTML元素的样式(CSS)。
您可以使用style属性将样式应用于特定的HTML元素。
要更改HTML元素的样式,请使用以下语法:
element.style.property = value
下面的示例更改<h1>元素的样式:
<!DOCTYPE html> <html> <h1 id="demo">HTML DOM style Property</h1> <script> document.getElementById("demo").style.color = "blue"; </script> </html>测试看看‹/›
当用户单击按钮时,此示例更改<h1>元素的样式:
<h1 id="demo">HTML DOM style Property</h1> <button onclick="myFunc()">Click</button> <script> function myFunc() { document.getElementById("demo").style.color = "blue"; } </script>测试看看‹/›
当用户单击按钮时,此示例还更改了<h1>元素的样式:
<h1 id="demo">HTML DOM style Property</h1> <button onclick="document.getElementById('demo').style.color = 'blue';">Click</button>测试看看‹/›
同样,您可以使用style属性将样式应用于HTML元素。
以下示例将从具有id="demo"的元素获取样式信息(border-top):
var x = document.getElementById("demo").style.borderTop;测试看看‹/›
注意:当从元素中获取style样式信息时,该属性不是很有用,因为该属性仅返回元素的style属性中设置的样式规则,而不返回来自其他位置的样式规则,例如嵌入式样式表中的样式规则,或外部样式表。
要获取实际上用于呈现元素的所有CSS属性的值,可以使用以下window.getComputedStyle()方法:
let para = document.querySelector('p'); let compStyles = window.getComputedStyle(para); para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size'); para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height'); para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');测试看看‹/›
您也可以使用className属性将CSS类获取或设置为HTML元素。
document.getElementById("x").className = "para";测试看看‹/›
您还可以使用该classList属性轻松地从元素获取,设置或删除CSS类。
下面的示例向<p>元素添加一个para类:
var elem = document.getElementById("x"); elem.classList.add("para");测试看看‹/›
将多个类添加到<p>元素:
var elem = document.getElementById("x"); elem.classList.add("para", "shadow");测试看看‹/›
从<p>元素中删除一个类:
var elem = document.getElementById("x"); elem.classList.remove("para");测试看看‹/›
在两个类之间切换<p>元素:
var elem = document.getElementById("x"); elem.classList.toggle("anotherClass");测试看看‹/›
切换一个类(“打开”)以创建侧面导航按钮: