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屬性中設置的樣式規(guī)則，而不返回來自其他位置的樣式規(guī)則，例如嵌入式樣式表中的樣式規(guī)則，或外部樣式表。
要獲取實際上用于呈現(xiàn)元素的所有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");測試看看?/?切換一個類（“打開”）以創(chuàng)建側(cè)面導航按鈕：