实现一个获取元素样式的函数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
投稿猜你喜欢
将一份一亿多条数据的csv文件等分为10份，代码如下所示：import pandas as pddata = pd.read_c- 前言本文主要给大家介绍了关于mysql语句插入含单引号或反斜杠值的相关内容，下面话不多说了，来一起看看详细的介绍吧比如说有个表，它的结构是这
- Application Name（应用程序名称）：应用程序的名称。如果没有被指定的话，它的值为.NET SqlClient Data Pro
- Python 的元组与列表类似，不同之处在于元组的元素不能修改。元组使用小括号，列表使用方括号。元组创建很简单，只需要在括号中添加元素，并使
- 一.运行效果先说两句，之前我在网上找的相关文章标题上写的是处理多连接，尼玛，全是假的。网上那些，根本不能异步处理多连接，不能主动给客户端发消
- pytorch 预训练模型读取修改相关参数的填坑修改部分层，仍然调用之前的模型参数。resnet = resnet50(pretrained
- 本文章是建立在已经安装MySQL数据库的前提，默认安装在C:\Program Files (x86)\MySQL,建议在安装时选中Conne
- 帮网友小改了一下主题. 任务比较简单, 只是为一个三栏主题添加对 Widget 的支持而已,就先从这次简单的案例开始说吧.单侧边栏funct
- 所谓网页抓取，就是把URL地址中指定的网络资源从网络流中读取出来，保存到本地。 在Python中有很多库可以用来抓取网页，我们先学习urll
- 因为函数或类都是对象，它们也能被四处传递。它们又是可变对象，可以被更改。在函数或类对象创建后但绑定到名字前更改之的行为为装饰(decorat
- 本文实例讲述了Python中map和列表推导效率比较。分享给大家供大家参考。具体分析如下：直接来测试代码吧：#!/usr/bin/env p
- 目录1. 需求是怎么来的2. 以不变应万变，是变也3. 最大限度地少改动4.对带参数的函数使用装饰器5. 给装饰器参数6.带类参数的装饰器7
- 接口在 Go 语言中，接口是一种抽象的类型，是一组方法的集合。接口存在的目的是定义规范，而规范的细节由其他对象去实现。我们来看一个例子：im
- 本文实例讲述了JS+CSS实现的日本门户网站经典选项卡导航效果。分享给大家供大家参考。具体如下：这里介绍的是来自日本门户网站的一款CSS+J
- 最多16列。 create table test ( f1 int, f2 int, f3 int, f4 int, f5 int, f6
- 目录一，猫狗数据集数目构成二，数据导入三，数据集构建四，模型搭建五，模型训练六，模型测试作为tensorflow初学的大三学生，本次课程作业
- 将int转换成datetime格式原始时间格式users['timestamp_first_active'].head()原
- 嘀咕嘀咕： 每次写文章往往开头是最难的，总想给UED读者不同的sense。就像我们设计产品总是想迎合我们的用户，最后觉得好似跟在用户后面狂奔
- 主要有五个方面：一..HTML页面转UTF-8编码问题二.PHP页面转UTF-8编码问题三.MYSQL数据库使用UTF-8编码的问题四.JS
- PHP代码 $str = preg_replace("/(<a.*?>)(.*?)(<\/a>)/&quo
