存取樣式資訊



在HTML標籤上，可以設定style屬性，藉以改變元素的樣式。例如：
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div id="message" style="color: #ffffff; background-color: #ff0000; width: 500px; height: 200px; padding-left: 250px; padding-top: 150px;">這是一段訊息</div>
    </body>
</html>

你可以直接使用JavaScript設定style特性上的各個特性來達到相同效果。例如：
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
            window.onload = function() {
                var 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>
    </head>
    <body>
        <div id="message">這是一段訊息</div>
    </body>
</html>

style特性所參考的是CSSProperties物件，要注意的是特性名稱的大小寫，通常是沒有破折線、採駝峰式命名。一般不會或不建議使用標籤的style屬性來設定樣式，而會定義在樣式表中。例如：
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <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屬性。若是在Internet Explorer上，則可以透過元素的currentStyle特性來取得計算樣式。

以下是取得計算樣式的簡單封裝：
function style(obj, prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(obj, null)[prop];
    }
    else if(obj.currentStyle) {
        return obj.currentStyle[prop];
    }
    else {
        return null;
    }
}

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

取得的樣式資訊存在著跨瀏覽器的問題。例如最簡單的顏色資訊，下面的範例在Firefox上顯示的是RGB()格式，而在Internet Explorer上是顯示#HEX格式：
 
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <style type="text/css">
            #message {
                color: #ffffff;
                background-color: #ff0000;
                width: 500px;
                height: 200px;
                padding-left: 250px;
                padding-top: 150px;
            }
        </style>
        
        <script type="text/javascript">
            window.onload = function() {
                function style(obj, prop) {
                    if(window.getComputedStyle) {
                        return window.getComputedStyle(obj, null)[prop];
                    }
                    else if(obj.currentStyle) {
                        return obj.currentStyle[prop];
                    }
                    else {
                        return null;
                    }
                }
                var color = style(
                      document.getElementById('message'), 'backgroundColor');
                document.getElementById('console').innerHTML = color;
            };
        </script>
    </head>
    <body>
        <div id="message">這是一段訊息</div>
        <span id="console"></span>
    </body>
</html>