原生javascript获取元素样式属性值的方法


Posted in Javascript onDecember 25, 2010

所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取.
elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值.
而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getComputedStyle获得Css的样式对象, 然后通过该对象的getPropertyValue获取属性值.
上述两种方法, 无论IE还是W3C的, 有一点是相同的, 它们所获取的是元素Css属性最终值. 这一点与Css的优先级是相同的.
有一点不同的是, IE的方法是通过Css属性的驼峰式名(如textAlign)获取, 而W3C的方法是通过元素Css原来的属性名(如text-align)获取的, 所以, 在使用W3C方法时, 需要对Css属性名做个简单的处理.
基于此, 我们可以封装一个获取元素属性值的方法, 如下:

function attrStyle(elem,attr){ 
if(elem.attr){ 
//若样式存在于html中,优先获取 
return elem.style[attr]; 
}else if(elem.currentStyle){ 
//IE下获取CSS属性最终样式(同于CSS优先级) 
return elem.currentStyle[attr]; 
}else if(document.defaultView && document.defaultView.getComputedStyle){ 
//W3C标准方法获取CSS属性最终样式(同于CSS优先级) 
//注意,此法属性原格式(text-align)获取的,故要转换一下 
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase(); 
//获取样式对象并获取属性值 
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr); 
}else{ 
return null; 
} 
}

记得精通JavaScript一书中获取元素位置那一节(忘了是第6还是第7章), 有获取元素样式属性值更详细的解释. 第一次知道document.defaultVies.getComputedStyle就是从这本书来的. 很棒的一本书, 有兴趣的朋友话一定要看看.
原方发布于Mr.Think的博客: http://mrthink.net/js-get-cssproperty/
Javascript 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 #Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 #Javascript
浅析javascript闭包 实例分析
Dec 25 #Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 #Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 #Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 #Javascript
JQuery live函数
Dec 24 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
jQuery示例收集
2010/11/05 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
简述 Python 的类和对象
2020/08/21 Python
如何查看python关键字
2021/01/17 Python
《在山的那边》教学反思
2014/02/23 职场文书
校长创先争优承诺书
2014/08/30 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2014年服务员工作总结
2014/11/18 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android