1. 程式人生 > >原生js獲取元素樣式值

原生js獲取元素樣式值

應該 eight current document 疑惑 行內樣式 lin script 輸出

在學習js初期,就一直有一個疑問,獲取元素樣式的值,不是直接使用
obj.style.left之類的就可以得到了嗎?可是使用這樣的方式,有的時候能夠獲取得到,有的時候又不能獲取,一直疑惑不已,但是由於以前學習態度的問題,也沒有深究,今天專門花了點時間整理了一下這方面的知識。

樣式

首先,我們要明確樣式的種類有以下三種

  • 內聯樣式: 也就是行內樣式,直接寫在DOM元素的style屬性中
  • 嵌入樣式: 寫在html頁面中的<style></style>中的樣式
  • 外部樣式: 由link標簽引入的css文件中的樣式
    優先級:內聯 > 嵌入 > 外部

首先,先寫一個例子來測試一下通過style方法獲取元素樣式的值,思路是,一個樣式寫在行內,一個樣式寫在style標簽中,一個樣式由link引入

<head>
    <meta charset="UTF-8">
    <title>get style</title>
    <style>
        <!-- 嵌入樣式 -->
        .box {
            height: 200px;
        }
    </style>
    <!-- 引入外部樣式 -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!-- 行內樣式 -->
    <div class="box" style="width: 100px;"></div>
</body>
// index.css
.box { background-color: orange; }
// javascript
var box = document.getElementsByClassName(‘box‘)[0];
console.log(box.style.width);
console.log(box.style.height);
console.log(box.style.backgroundColor);

得到的結果為:

‘100px‘
‘‘
‘‘

因此我們可以看到height值和backgroundColor值沒有被獲取到,所以我們得到以下結論:
style只能獲取行內樣式的值,無法獲取嵌入式樣式和外部樣式的值

那麽嵌入式樣式和外部樣式的值應該怎麽辦呢,看下面代碼

// currentStyle: IE下獲取元素樣式的值
if ( box.currentStyle ) {
    console.log( ‘this is IE.‘ );
    console.log( box.currentStyle.width );
    console.log( box.currentStyle.height );
    console.log( box.currentStyle.backgroundColor );
} else {
    // chorme and firefox
    console.log( document.defaultView.getComputedStyle(box, false).width );
    console.log( document.defaultView.getComputedStyle(box, fasle).height );
    console.log( document.defaultView.getComputedStyle(box, false).backgroundColor );
}

輸出結果

‘this is IE.‘
‘100px‘
‘200px‘
‘orange‘

分別在IE, chrome, firefox下測試一下,最後都能夠獲取所有的屬性。非常好,於是我們可以得出結論
獲取元素樣式值的最佳方式,就是通過obj.currentStyle 或者
document.defaultView.getComputedStyle( obj, false ) 的方式,其中前者適用於IE,後者適用於chrome和Firefox

因此我們可以寫一個獲取元素樣式值的方法

var getStyle = function(obj, key) {
    return obj.currentStyle ? obj.currentStyle[key] : document.defaultView.getComputedStyle( obj, false )[key];
}




原生js獲取元素樣式值