从样式表中读取和更改样式

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)