参考资料:
一篇很好的参考文章
http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
用js裸鞋一个获取元素style值时遇到了兼容性问题,对的,就是IE这奇葩
(1)在获取元素时,IE使用的是obj.currenStyle而FF使用的是obj.getComputedStyle,二者都是只读属性,而obj.style则是可读可写,可是style只能获取内嵌的style,从而致使了须要使用前两个函数来获取样式
摘:http://www.cnblogs.com/flyjs/archive/2012/02/20/2360502.html
样式表有三种方式
内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对全部的Tag有效。
内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表(External Style Sheet):若是不少网页须要用到一样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,而后在每一个须要用到这些样式(Styles)的网页里引用这个CSS文件。 最经常使用的是style属性,在JavaScript中,经过document.getElementById(id).style.XXX就能够获取到XXX的值,但意外的是,这样作只能取到经过内嵌方式设置的样式值,即style属性里面设置的值。
(2)在获取元素时,若是要选择的是类的话,就须要使用getElementsByClassName, 可是在IE8如下是不支持的,因此须要使用getElementsByTagName来获取全部tag,而后在循环检索className是否包含所需的类名
附上代码:javascript
function getStyle(id, style) { var $obj = null, styleVal = "", _idname, _classname ; if (id[0] === '#') { _idname = id.slice(1); $obj = document.getElementById(_idname); } else if (id[0] === '.') { _classname = id.slice(1); if(document.getElementsByClassName) { console.log("could use getElementsBylassName"); $obj = document.getElementsByClassName(_classname)[0]; } else { console.log("IE8如下 could not use getElementsBylassName!"); // IE 8 如下不能经过class标签getElementsByClassName函数获取元素 getElementsByClassName = function(className) { var children = document.getElementsByTagName("*"); console.log("children"+children.toString()); var _elems = new Array(); for (var i = 0, len = children.length; i < len; i++) { var _child = children[i]; var _classname = _child.className.split(' '); console.log(children[i].className); for (var j = 0, j_len = _classname.length; j < j_len; j++) { if (className == _classname[j]) { _elems.push(_child); break; } } } return _elems; } $obj = getElementsByClassName(_classname)[0]; } } if ($obj != null) { if ($obj.currentStyle) { console.log("IE"); // styleVal = $obj.currentStyle[style]; styleVal = $obj.currentStyle[style] ? $obj.currentStyle[style] : $obj.currentStyle.getPropertyValue(style); } else if (window.getComputedStyle) { console.log("FF"); // 兼容IE9以上和其余浏览器 styleVal = window.getComputedStyle($obj, null)[style] ? window.getComputedStyle($obj, null)[style] : window.getComputedStyle($obj, null).getPropertyValue(style); } else { console.log("could not get style" + style); } } else { console.log("could not find obj"); return null; } return styleVal; }