成都网站建设设计

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

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

本篇内容主要讲解“Javascript如何实现一个获取元素样式的函数getStyle”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


新闻名称:Javascript如何实现一个获取元素样式的函数getStyle
文章路径:http://chengdu.cdxwcx.cn/article/jghoji.html