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;
    }
}