style、currentStyle、getComputedStyle區別介紹

時間 2019-11-20

標籤 style currentstyle getcomputedstyle 區別介紹简体版

原文原文鏈接

style、currentStyle、getComputedStyle區別介紹

樣式表有三種方式spa

內嵌樣式（inline Style）：是寫在Tag裏面的，內嵌樣式只對全部的Tag有效。
內部樣式（internal Style Sheet）：是寫在HTML的<head></head>裏面的，內部樣式只對所在的網頁有效。
外部樣式表（External Style Sheet）：若是不少網頁須要用到一樣的樣式(Styles)，將樣式(Styles)寫在一個以.css爲後綴的CSS文件裏，而後在每一個須要用到這些樣式(Styles)的網頁裏引用這個CSS文件。

　　最經常使用的是style屬性，在JavaScript中，經過document.getElementById(id).style.XXX就能夠獲取到XXX的值，但意外的是，這樣作只能取到經過內嵌方式設置的樣式值，即style屬性裏面設置的值。firefox

　　style              標準的樣式！多是由style屬性指定的！
     runtimeStyle   運行時的樣式！若是與style的屬性重疊，將覆蓋style的屬性！
　　currentStyle   指 style 和 runtimeStyle 的結合！code

經過currentStyle就能夠獲取到經過內聯或外部引用的CSS樣式的值了（僅限IE）blog

如：document.getElementById("test").currentStyle.topip

要兼容FF，就得須要getComputedStyle 出馬了get

注意:getComputedStyle是firefox中的，it

currentStyle是ie中的.class

例：test

<style>
     #mydiv {
            width : 300px;
     }
</style>

var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
      var width = mydiv.currentStyle['width'];
      alert('ie:' + width);
} else if(window.getComputedStyle) {
      var width = window.getComputedStyle(mydiv , null)['width'];
      alert('firefox:' + width);
}

另外在FF下還能夠經過下面的方式獲取

document.defaultView.getComputedStyle(mydiv,null).width
window.getComputedStyle(mydiv , null).width

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。