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

开发 后端
在JavaScript中,为便于操作,现在的很多js-lib中都对此做了封装,但很多时候我们并不需要引入什么lib,我们需要的仅仅是一个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');

【编辑推荐】

  1. JavaOne 2009第三天:微软与Sun/Oracle携手并进
  2. 开发高可移植性J2ME的软件
  3. Java虚拟机(JVM)中的内存设置详解
责任编辑:王观 来源: 动态网站制作指南
相关推荐

2018-11-09 10:50:24

JavaScript前端

2018-11-08 16:18:07

JavaScript前端

2015-05-25 15:06:28

JavaScript函数式编程

2018-09-18 10:11:21

前端vue.jsjavascript

2021-06-25 10:38:05

JavaScript编译器前端开发

2011-12-26 16:39:43

局部函数

2011-05-25 14:34:26

javascript

2022-02-10 07:41:02

JavaScriponce函数

2017-03-20 17:59:19

JavaScript模板引擎

2020-11-30 06:20:13

javascript

2020-10-16 08:26:07

JavaScript开发技术

2017-03-15 08:43:29

JavaScript模板引擎

2022-10-21 14:21:46

JavaScript笔记技能

2021-06-16 17:46:55

函数指针结构

2014-02-14 09:37:01

JavascriptDOM

2015-03-10 11:21:44

JavaScript组JavaScript

2020-06-11 08:48:49

JavaScript开发技术

2017-05-02 11:30:44

JavaScript数组惰性求值库

2010-09-13 16:46:29

JavaScriptHTML DOM节点

2021-04-30 08:22:36

异步求和函数
点赞
收藏

51CTO技术栈公众号