实现一个获取元素样式的函数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');
0
投稿猜你喜欢
做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。下面以 Tudou.com 的首页为例，总结总结。就制作而言，我- 是的，这仅仅是一个PPT文档，由Anna Debenham上传至slideshare。幻灯片的标题叫做《CSS nuggets》，嗯，很好的
- 要想从命令行启动mysqld服务器，你应当启动控制台窗口(或“DOS window”)并输入命令：C
- ASP+XML制作菜单管理!menu.asp 这个是前台执行部分<％ '----------------
- asp 中处理文件上传以及删除时常用的自定义函数：删除文件,建立目录的程序,根据原文件名生成新的随机文件名,CMS替换函数,将所有开始，结束
- 周六。据闻北服美女甚多，于是应邀去做了一个关于UED的讲座。人不多，讲的很乱，但大家听的很认真，欣慰。讲完之后回答了很多关于社区、搜索、设计
- 在FF下，如果内容含有FLASH，FLASH不会被隐藏掉，做为变通，我在收缩完成之后，将生成的内容容器隐藏掉了。<!DOCTYPE h
- 翻译：ShiningRay简介你是否知道JavaScript其实也是一个函数式编程语言呢？本指南将教你如何利用JavaScript的函数式特
- 这是一个给新手学习代码的帖子，包含以下内容：如何使用UBB代码，如何用js与剪贴板交互，如何使用textRange对象，如何使用自定义的快捷
- 代码如下:SELECT * FROM Orders WHERE OrderGUID IN('BC71D821-9E25-
- 10月9日是国庆中秋黄金周后上班的第一天，当天近8亿人次逛淘宝，即淘宝网每分钟完成43.47万元的交易，创下国内网购单天交易最高纪录。从销售
- 加上设置字符编码的方法：response.setHeader("charset","gb2312")
- 以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼
- 在经过前面几个部分的操作之后，我们的网页已经图文并茂，具有相当的效果了，但是这对于网页来说还不够，为了网站中的众多网页能够成为一个有机的整体
- 费茨法则是人机交互领域里一个非常重要的法则，在10年来得到了广泛的应用。Fitts法则最基本的观点就是任何时候，当一个人用鼠标来移动鼠标指针
- 先看看CSS框架的利与弊前段时间一直在讨论CSS框架。很多朋友看了那三篇文章后提了不少自己意见。特别是一位北京的朋友A君，他有一个小的团体，
- 一、图像缩略图的编辑图像的缩略图是指把图像按原比例缩小,可作为原图的预览，这在网络速度比较慢时可快速地显示图片的概图。当你的网页上有大型图片
- 方法一：利用Cookies对象 因为Cookies对象把变量的值保存在浏览器客户端，所以可以根据Cookies保存的IsVoted的值来判断
- 有助于效率的类型选择1、使你的数据尽可能小最基本的优化之一是使你的数据(和索引)在磁盘上(并且在内存中)占据的空间尽可能小。这能给出巨大的改
- 一般来说，一个真正的、完整的站点是离不开数据库的，因为实际应用中，需要保存的数据很多，而且这些数据之间往往还有关联，利用数据库来管理这些数据
