從樣式表中讀取和更改樣式

element.style 僅讀取內聯設定的 CSS 屬性，作為元素屬性。但是，樣式通常在外部樣式表中設定。可以使用 window.getComputedStyle(element) 訪問元素的實際樣式。此函式返回一個包含所有樣式的實際計算值的物件。

類似於閱讀和更改內聯樣式示例，但現在樣式位於樣式表中：

<div id="element_id">abc</div>
<style type="text/css">
    #element_id {
        color:blue;
        width:200px;
    }
</style>

JavaScript 的：

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // '' -- empty string
console.log(window.getComputedStyle(element).color); // rgb(0, 0, 255)

// read the width, reset it, then read it again
console.log(window.getComputedStyle(element).width); // 200px
element.style.width = 'initial';
console.log(window.getComputedStyle(element).width); // 885px (for example)