原生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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
Iframe thickbox2.0使用的方法
Mar 05 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
php实现图片转换成ASCII码的方法
2015/04/03 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
javascript void(0)的妙用
2009/10/21 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
javascript求日期差的方法
2016/03/02 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
2014年会演讲稿范文
2014/01/06 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
中学家长会邀请函
2014/01/17 职场文书
国贸专业求职信
2014/06/28 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
党员读书活动心得体会
2016/01/14 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python