成都网站建设设计

将想法与焦点和您一起共享

Javascript实现一个获取元素样式的函数getStyle

元素的CSS样式,除了包括内联的(即通过style属性加上的)样式定义外,还有页面嵌入的css和外部引入的css两种方式。但在JS中通过el.style.xxx只能获取的内联的样式属性,这就存在比较大的局限性。好在浏览器都提供了另外的方式来获取以其它方式定义的样式属性,在IE中有currentStyle、FF等w3c标准的浏览器中有getComputedStyle。

站在用户的角度思考问题,与客户深入沟通,找到独山子网站设计与独山子网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟空间、企业邮箱。业务覆盖独山子地区。

参考了几个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');


网页名称:Javascript实现一个获取元素样式的函数getStyle
链接分享:https://chengdu.cdxwcx.cn/article/dhgigss.html