在JavaScript中,为便于操作,现在的很多js-lib中都对此做了封装,但很多时候我们并不需要引入什么lib,我们需要的仅仅是一个getStyle函数来获取元素的当前样式定义。

元素的CSS款式,除了包含内联的(即经过style特点加上的)款式界说外,还有页面嵌入的css和外部引进的css两种方法。但在JS中经过el.style.xxx只能获取的内联的款式特点,这就存在比较大的局限性。好在浏览器都供给了别的的方法来获取以其它方法界说的款式特点,在IE中有currentStyle、FF等w3c规范的浏览器中有getComputedStyle。

Javascript完成一个获取元素款式的函数getStyle(js获取元素的样式)  Javascript 函数 getStyle 第1张

参阅了几个JS-Lib的代码,决议完成一个简化版的getStyle函数。该函数方针为:满意大多数需求、跨浏览器、代码简练、功能优秀。本着这几点要求,自己花了一个小时的时刻才搞定,首要利用了“JS逻辑运算符特性、代码"编译",函数的即时履行”几个小技巧,写到这儿,以备今后运用,假如能对哪位朋友有协助,那当然更好。

程序代码
var getStyle=function(){
var f=document.defaultView;
return new Function('el','style',[
"style.indexOf('-')>-1 && (style=style.replace(/-(\\w)/g,function(m,a){return a.toUpperCase()}));",
"style=='float' && (style='",
f ? 'cssFloat' : 'styleFloat',
"');return el.style[style] || ",
f ? 'window.getComputedStyle(el, null)[style]' : 'el.currentStyle[style]',
' || null;'].join(''));
}();

//运用示例:
var el=document.getElementById('test');
getStyle(el,'line-height');
getStyle(el,'color');
getStyle(el,'float');

【修改引荐】

  1. JavaOne 2009第三天:微软与Sun/Oracle携手并进
  2. 开发高可移植性J2ME的软件
  3. Java虚拟机(JVM)中的内存设置详解
转载请说明出处
知优网 » Javascript完成一个获取元素款式的函数getStyle(js获取元素的样式)

发表评论

您需要后才能发表评论