存取樣式資訊

在 HTML 標籤上，可以設定 style 屬性，藉以改變元素的樣式。例如：

<div style="color: #ffffff; background-color: #ff0000; width: 500px; height: 200px; padding-left: 250px; padding-top: 150px;">這是一段訊息</div>

可以直接使用 JavaScript 設定 style 特性上的各個特性來達到相同效果。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <div id="message">這是一段訊息</div>

<script type="text/javascript">
    let message = document.getElementById('message');
    message.style.color = '#ffffff';
    message.style.backgroundColor = '#ff0000';
    message.style.width = '500px';
    message.style.height = '200px';
    message.style.paddingLeft = '250px';
    message.style.paddingTop = '150px';
</script>  

</body>
</html>

按此觀看執行結果。

style 特性參考的是 CSSProperties 物件，要注意的是特性名稱的大小寫，通常是沒有破折線、採駝峰式命名。一般不會或不建議使用標籤的 style 屬性來設定樣式，而會定義在樣式表中。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        #message {
            color: #ffffff; 
            background-color: #ff0000; 
            width: 500px; 
            height: 200px; 
            padding-left: 250px; 
            padding-top: 150px;
        }
    </style>
</head>
<body>

    <div id="message">這是一段訊息</div>

</body>
</html>

按此觀看執行結果。

然而在這種情況下，無法使用 style 特性來取得樣式表中定義的各個樣式資訊，因為元素的 style 特性是對應於標籤的 style 屬性，標籤若沒有定義 style 屬性，或程式中沒有設定 style 的特性，就無法使用 style 特性來取得樣式資訊。

標籤的 style 屬性或透過元素的 style 特性會覆蓋樣式表的設定，由於一般並不建議直接於標籤上設定 style 屬性，因此透過程式時，通常建議將 style 特性用於設定樣式，而不是取得樣式。

如果標籤沒有設定 style 屬性，而想要取得元素上套用的樣式資訊，則必須取得元素的計算樣式（Computed style），計算樣式是指所有樣式規則（包括樣式表、style 屬性）已套用至元素後的樣式結果。

若是在標準瀏覽器中，可以使用 window 的 getComputedStyle 函式（與 document.defaultView.getComputedStyle 是相同函式），取得的樣式物件是唯讀的 CSS2Properties 物件，可以直接如同使用 style 特性，直接於上指定特性來取得樣式資訊，或是使用 getPropertyValue() 方法指定 CSS 屬性。

getComputedStyle 的第二個引數可指定虛擬類別（pseudo-class），如果不設定的話，也必須指定 null，例如：

window.getComputedStyle(elem, null)[prop];

來使用程式取得上一個範例網頁的 CSS 樣式設定：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        #message {
            color: #ffffff; 
            background-color: #ff0000; 
            width: 500px; 
            height: 200px; 
            padding-left: 250px; 
            padding-top: 150px;
        }
    </style>
</head>
<body>

    <div id="message">這是一段訊息</div>
    <span id="console"></span>

<script type="text/javascript">
    function style(elem, prop) {
        return window.getComputedStyle(elem, null)[prop];
    }

    let message = document.getElementById('message');
    let color = style(message, 'backgroundColor');
    document.getElementById('console').innerHTML = color;
</script>  
</body>
</html>

按此觀看執行結果。