getComputedStyle與currentStyle獲取樣式

時間 2019-11-16

標籤 getcomputedstyle currentstyle 獲取樣式简体版

原文原文鏈接

CSS的樣式分爲三類：css

內嵌樣式：是寫在標籤裏面的，內嵌樣式只對所在的標籤有效
內部樣式：是寫在HTML裏面的，內部樣式只對所在的網頁有效
外部樣式表：若是不少網頁須要用到一樣的樣式，將樣式寫在一個以.css爲後綴的CSS文件裏，而後在每一個須要用到這些樣式的網頁裏引用這個CSS文件html

getComputedStyle是一個能夠獲取當前元素全部最終使用的CSS屬性值，返回的是一個CSS樣式聲明對象，只讀
currentStyle是IE瀏覽器的一個屬性瀏覽器

基礎知識

衆所周知，用document.getElementById('element').style.xxx能夠獲取element的xxx樣式信息，但是它獲取的只能是DOM元素內嵌樣式style屬性裏的樣式規則，對於使用外部樣式表或內部樣式設置的元素，就獲取不到樣式信息了。
DOM標準裏有個全局方法getComputedStyle，能夠獲取到當前對象樣式信息，如：getComputedStyle(obj,null).paddingLeft，就能獲取到對象的左內邊距。可是IE不支持此方法，IE中獲取樣式的方法是currentStyle，不一樣於全局方法getComputedStyle，它是做爲DOM元素屬性存在的，如：obj.currentStyle.paddingLeft，在IE中就獲取到對象的左內邊距了，兼容性的寫法以下：code

return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;

getComputedStyle第二個參數表示的是:after、:before之類的僞類，若是不用僞類的話設置爲null便可。注意的是:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 以前，第二個參數「僞類」是必需的（若是不是僞類，設置爲null），不過如今嘛，不是必需參數了
這樣，就能在IE及FF中返回對象的當前樣式信息了。
特別注意一點：若是要獲取當前對象的顏色信息，IE返回的是16進制值，如:#ffffff，而其餘瀏覽器返回的是rgb值，如:rgb(255,255,255)
下面是一個簡單的小示例:htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getComputedStyle與currentStyle獲取樣式</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid darkcyan;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        function getStyle(obj,attr) {
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        window.onload = function(){
            var box = document.getElementById('box');
            alert(getStyle(box,'height'));
        }
    </script>
</body>
</html>

兼容性

getComputedStyle:FireFox、Opera、Safari、Chrome均支持
currentStyle:僅IE支持對象

相關標籤/搜索

每日一句

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