原生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 网页水印(非图片水印)实现代码
Mar 01 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
vue router 配置路由的方法
Jul 26 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
Javascript实现单选框效果
Dec 09 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
jquery map方法使用示例
2014/04/23 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Jquery EasyUI $.Parser
2017/06/02 jQuery
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python Tkinter实现简易计算器功能
2018/01/30 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python闭包思想与用法浅析
2018/12/27 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
详解python中的闭包
2020/09/07 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
工程质量承诺书范文
2014/03/27 职场文书
办公室日常管理制度
2015/08/04 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android