JavaScript擷取DOM節點HTML元素CSS樣式

標籤：

JavaScript擷取DOM節點HTML元素CSS樣式技術

maybe yes 發表於2015-01-10 18:07

原文連結 : http://blog.lmlphp.com/archives/59  來自 : LMLPHP後院

如何使用 JavaScript 擷取某個 DOM 節點下 HTML 元素的 CSS 樣式值？使用過 JQuery 的童鞋一定都非常的熟悉，Jquery 提供了非常強大的 CSS 方法，可以很方便的設定和擷取元素的 style 屬性。

某些情況下，我們不能使用 JQuery 時，就必須使用純 JavaScript 擷取元素的 style 屬性值。本文將介紹使用純 JavaScript 擷取元素的的樣式值。

使用 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、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;    }}

閱(69)評(0)查看評論

JavaScript擷取DOM節點HTML元素CSS樣式