原生JavaScript獲取css樣式

基礎知識：

訪問屬性：obj.attr 或者 obj['attr']

通過js訪問style屬性 :

document.getElementById("main").style.backgroundColor; 

通過js改變style屬性:

document.getElementById("main").style.backgroundColor="blue"; 

 

 

使用 CSS 控制頁面的四種方式，分別為行內樣式(內聯樣式)、內嵌式、鏈接式、導入式。

行內樣式(內聯樣式)即寫在 HTML 標簽中的 style 屬性中控制元素樣式，如下代碼示例：

<div style="width:100px;height:100px;"></div>

內嵌樣式即寫在 style 標簽中，如下代碼示例：

<style type="text/css">
div{ width:100px; height:100px }
</style>

鏈接式即為用 link 標簽引入css文件，如下代碼示例：

<link href="/static/css/main.css?v=1" type="text/css" rel="stylesheet" />

導入式即為用 import 引入 CSS 文件，如下代碼示例：

@import url("/static/css/main.css?v=1")

可以使用 style 屬性獲取 CSS 樣式，但是 style 只能獲取元素的內聯樣式。因此，要獲取元素的完整的樣式信息，必須使用 window 對象的 getComputedStyle 方法，此方法有2個參數，第一個參數為要獲取計算樣式的元素，第二個參數可以是null、空字符串、偽類(如:before,:after)，這兩個參數 都是必需的。（為什么測試后不加這個參數也可？目前可以了？）在 IE8 以下瀏覽器中沒有實現 getComputedStyle 方法，但可以使用 IE 中每個元素有自己的 currentStyle 屬性來獲取樣式。獲取元素樣式的兼容代碼如下：

<style type="text/css">
#eleid{
    font-size:14px;
}
</style>

<div id="eleid"></div>

<script>
var ele = document.getElementById("eleid");
var style = window.getComputedStyle ? 
    window.getComputedStyle(ele, "") : 
    ele.currentStyle;

var font_size = style.fontSize;　　//14px;
</script>

獲取<link>和<style>標簽寫入的樣式，通過 styleSheets 獲取某個樣式表。這種方法只能獲取聲明時候的樣式，跟實際運算后的有差異，如下示例：

var obj = document.styleSheets[0];
if( obj.cssRules ) {
    // 非IE [object CSSRuleList]
    rule = obj.cssRules[0];  
} else {
    // IE [object CSSRuleList]
    rule = obj.rules[0];
}

網上流傳的一些獲取樣式的方法收集如下：

var css = function (_obj,_name){
    var result;
        //轉換成小寫
        _name = _name.toLowerCase();
        //獲取樣式值
        if(_name && typeof value === 'undefined'){
            //如果該屬性存在於style[]中 （操作獲取內聯樣式表 inline style sheets）
            if(_obj.style && _obj.style[_name]){
                result = _obj.style[_name];
            }
            //操作嵌入樣式表或外部樣式表 embedded style sheets and linked style sheets
            else if(_obj.currentStyle){
                 // 否則 嘗試IE的currentStyle
                 _name = _name.replace(/\-([a-z])([a-z]?)/ig,function(s,a,b){
                    return a.toUpperCase()+b.toLowerCase();
                });
                result = _obj.currentStyle[_name];
            }
            //或者W3C的方法 如果存在的話 Firefox,Opera,safari
            else if(document.defaultView && document.defaultView.getComputedStyle){
                //獲取Style屬性的值，如果存在
                var w3cStyle = document.defaultView.getComputedStyle(_obj, null);
                result = w3cStyle.getPropertyValue(_name);
            }
            if(result.indexOf('px')!=-1) result = result.replace(/(px)/i,'');
            return result;
        }
    }

<script type="text/javascript">
function getStyle( elem, name )
{
    //如果該屬性存在於style[]中，則它最近被設置過(且就是當前的)
    if (elem.style[name])
    {
        return elem.style[name];
    }
    //否則，嘗試IE的方式
    else if (elem.currentStyle)
    {
        return elem.currentStyle[name];
    }
    //或者W3C的方法，如果存在的話
    else if (document.defaultView && document.defaultView.getComputedStyle)
    {
        //它使用傳統的"text-Align"風格的規則書寫方式，而不是"textAlign"
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        //獲取style對象並取得屬性的值(如果存在的話)
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    //否則，就是在使用其它的瀏覽器
    }
    else
    {
        return null;
    }
}
</script>

不過對於css中的float屬性，由於JavaScript將float作為保留字，所以不能將其用作屬性名，因此有了替代者，在 IE中是”styleFloat”,而在FireFox、Safari、Opera和Chrome中則是”cssFloat”。所以基於兼容性的考慮可以 將樣式操作改為如下形式：

//element:需要獲取樣式的目標元素;name:樣式屬性
function getStyle(element, name) {
    var computedStyle;
    try {
        computedStyle = document.defaultView.getComputedStyle(element, null);
    } catch (e) {
        computedStyle = element.currentStyle;
    }
    if (name != "float") {
        return computedStyle[name];
    } else {
        return computedStyle["cssFloat"] || computedStyle["styleFloat"];
    }
}
//element:需要設置樣式的目標元素;name:樣式屬性;value:設置值
function setStyle(element, name, value) {
    if (name != "float") {
        element.style[name] = value;
    } else {
        element.style["cssFloat"] = value;
        element.style["styleFloat"] = value;
    }
}