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

作者:yemoo 来源:yemoo's blog 时间:2009-02-10 10:37:00 

元素的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('')); 
}(); 
 
//使用示例: 
var el=document.getElementById('test'); 
getStyle(el,'line-height'); 
getStyle(el,'color'); 
getStyle(el,'float'); 

标签:css样式,函数,封装,getComputedStyle,currentStyle
0
投稿

猜你喜欢

  • XML:OpenSearch 浏览器指定搜索应用

    2010-05-04 19:37:00
  • MenuEverywhere 程序图标设计

    2011-08-14 06:57:23
  • asp 存储过程分页代码第1/2页

    2011-04-03 10:39:00
  • ASP使用wsImage组件给图片加水印

    2008-12-29 19:14:00
  • 22个HTML5的初级技巧

    2010-12-17 12:39:00
  • CSS如何做细线表格

    2009-01-09 13:12:00
  • [译]开发人员经常犯的8个设计错误

    2008-02-01 12:28:00
  • asp文章干扰码实现方法

    2007-08-19 18:07:00
  • 升级SQL Server 2008数据库引擎

    2009-03-25 12:58:00
  • 初探MS SQL CE+Codesmith

    2009-05-11 09:03:00
  • MYSQL教程:表达式操作符和数据类型转换

    2009-02-27 15:51:00
  • 提高asp程序访问速度的方法

    2008-10-23 16:37:00
  • sqlserver 多表查询不同数据库服务器上的表

    2012-04-13 11:41:51
  • 网页对联广告代码效果大全

    2007-10-25 23:16:00
  • asp 删除数据并同时删除图片的代码

    2011-02-28 10:39:00
  • 说说值类型数据“.”操作符的类型转换

    2009-12-13 10:39:00
  • 游戏的用户体验营销小札

    2009-08-30 15:13:00
  • 如何解决ASP脚本运行超时的错误

    2007-10-14 11:38:00
  • asp 分页函数,可以显示 1,2,3,4,5... 前十页,后十页,下一页,上一页

    2009-07-05 18:34:00
  • 一条sql 语句搞定数据库分页

    2009-03-21 18:32:00
  • asp之家 网络编程 m.aspxhome.com