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

xiao心的春天

xiao心的春天

2016-02-19 15:53

今天图老师小编要跟大家分享Javascript 实现一个获取元素样式的函数getStyle,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

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

为便于操作,现在的很多js-lib中都对此做了封装,但很多时候我们并不需要引入什么lib,我们需要的仅仅是一个getStyle函数来获取元素的当前样式定义。参考了几个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(''));
}();

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

From:http://www.ajaxbbs.net/post/webFront/JS-Get-Style-Function.html

展开更多 50%)
分享

猜你喜欢

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

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

一个不错的用JavaScript实现的UBB编码函数

Web开发
一个不错的用JavaScript实现的UBB编码函数

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JavaScript 一个日期选择函数

Web开发
JavaScript 一个日期选择函数

用JS实现的一个include函数

Web开发
用JS实现的一个include函数

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Javascript一个简单的图像预载函数

Web开发
Javascript一个简单的图像预载函数

一个全面获取图象信息的函数getImageInfo()

PHP
一个全面获取图象信息的函数getImageInfo()

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Visual C#编程入门之C#的程序结构

Visual C#编程入门之C#的程序结构

JavaScript实现动态增加文件域表单

JavaScript实现动态增加文件域表单
下拉加载更多内容 ↓