Dreamweaver教程 FrontPage教程 Flash教程 CSS教程
  • javascript教程
  • 当前位置:教程 > 网页制作 > javascript教程 > 正文

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

    编辑:教程网 来源:网络 时间:2011年10月20日 16:49

    元素的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');


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


  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/javascript/28804.html

  • 上一篇:javascript获取FCKeditor内容
  • 下一篇:javascript代码创建表格类