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、空字符串、僞類(如: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)查看評論