JavaScript DOM CSS (修改 CSS 樣式)

你可以透過 DOM API 來操作 HTML 元素的 CSS 樣式 (style)。

Element.style.cssProperty = newStyle

DOM 的 style 屬性 (對應到 HTML 元素的 style 屬性) 可以用來直接設定一個元素的樣式，其中 cssProperty 是 HTML 元素的 CSS 屬性名稱，newStyle 則是該 CSS 屬性的值。

範例：

<p id="foo">hello world</p>

<script>
    var foo = document.getElementById('foo');

    // 將 <p> 的文字字體顏色改成綠色
    foo.style.color = 'green';
    
    // 將 <p> 的背景顏色改成灰色
    foo.style.background = 'gray';
</script>

如果 CSS 屬性名稱中有 - (例如 background-color)，你可以用 [] 的語法，或將屬性名稱改用駝峰式 (camel case) 的寫法：

<p id="foo">hello world</p>

<script>
    var foo = document.getElementById('foo');

    // 將背景顏色改為紅色
    foo.style['background-color'] = '#f00';

    // 將 margin-top 設為 100px
    foo.style.marginTop = '100px';
</script>

Element.style.cssText = newCSS

cssText 可以用來直接讀寫 HTML 元素的 style 屬性。

用法：

<p id="foo">hello world</p>

<script>
    var foo = document.getElementById('foo');

    // 輸出 "" 空字串，因為 foo 上沒有設定 style 屬性
    alert(foo.style.cssText);

    // 將 foo 的字體大小設為 20px、字體顏色設為紫色
    foo.style.cssText = 'font-size: 20px; color: purple;';

    // 輸出 font-size: 20px; color: purple;
    alert(foo.style.cssText);
</script>

window.getComputedStyle(element)

window.getComputedStyle 方法用來取得一個 HTML 元素目前所有的 CSS 樣式值。

那為什麼不用 DOM 的 style 屬性？因為光是 HTML 元素的 style 屬性還無法決定一個元素最終的 CSS 樣式，還需要知道頁面中 <style> 標籤裡寫的樣式，再加上外部 CSS 樣式表 (style sheets) 裡的內容，才能得到一個元素最終的樣式，window.getComputedStyle 即用來取得元素最終的樣式值。

用 window.getComputedStyle 方法取得某元素當前所有的 CSS 樣式值後，接著再用返回物件的 getPropertyValue 方法來取得個別的 CSS 屬性值。

語法：

var style = window.getComputedStyle(element, pseudoElement);

參數 element 表示一個 HTML DOM 元素；pseudoElement 是一個選擇性參數，用來指定 pseudo-element。

範例：

<style>
#elem {
    position: absolute;
    left: 100px;
    top: 200px;
    height: 100px;
}
</style>

<div id="elem" style="top:50px;">dummy</div>

<script>
    var elem = document.getElementById('elem');

    // 顯示 100px
    alert(window.getComputedStyle(elem).getPropertyValue('height'));

    // 顯示 50px
    alert(window.getComputedStyle(elem).getPropertyValue('top'));
</script>

pseudo-element 的例子：

<style>
h3::after {
    content: ' rocks!';
}
</style>

<h3>generated content</h3>

<script>
    var h3 = document.querySelector('h3');

    // 顯示 " rocks!"
    alert(getComputedStyle(h3, ':after').content);
</script>

Element.currentStyle.cssProperty

在 IE9 以下可以用 Element.currentStyle 屬性來取得元素目前的 CSS 樣式，這是一個 IE 專有 (proprietary) 的屬性。

語法：

Element.currentStyle.cssProperty

其中 cssProperty 是 HTML 元素的 CSS 屬性名稱，採駝峰式 (camel case) 的寫法。

用法：

<style>
#elem {
    position: absolute;
    left: 100px;
    top: 200px;
    height: 100px;
}
</style>

<div id="elem" style="top:50px;">dummy</div>

<script>
    var elem = document.getElementById('elem');

    // 顯示 100px
    alert(elem.currentStyle.height);

    // 顯示 50px
    alert(elem.currentStyle.top);
</script>