JS DOM 改變CSS
HTML DOM允許JavaScript擷取和更改HTML元素的樣式(CSS)。
更改元素樣式
您可以使用style屬性将樣式應用于特定的HTML元素。
要更改HTML元素的樣式，請使用以下文法：element.style.property = value
下面的示例更改
元素的樣式：
示例html>
HTML DOM style Property
document.getElementById("demo").style.color = "blue";
測試看看‹/›
當使用者單擊按鈕時，此示例更改
元素的樣式：
示例
HTML DOM style Property
Click
function myFunc() {
document.getElementById("demo").style.color = "blue";
}
測試看看‹/›
當使用者單擊按鈕時，此示例還更改了
元素的樣式：
示例
HTML DOM style Property
Click測試看看‹/›
從元素擷取樣式資訊
同樣，您可以使用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 += '
line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '
padding: ' + compStyles.getPropertyValue('padding');測試看看‹/›
将CSS類添加到元素
您也可以使用className屬性将CSS類擷取或設定為HTML元素。
示例document.getElementById("x").className = "para";測試看看‹/›
您還可以使用該classList屬性輕松地從元素擷取，設定或删除CSS類。
下面的示例向
元素添加一個para類：
示例var elem = document.getElementById("x");
elem.classList.add("para");測試看看‹/›
将多個類添加到
元素：
示例var elem = document.getElementById("x");
elem.classList.add("para", "shadow");測試看看‹/›
從
元素中删除一個類：
示例var elem = document.getElementById("x");
elem.classList.remove("para");測試看看‹/›
在兩個類之間切換
元素：
示例var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");測試看看‹/›
切換一個類(“打開”)以建立側面導航按鈕：