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)查看评论