原生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 function对象那些迷惑分析
Oct 24 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
JS中的作用域链
Mar 01 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
详解node中创建服务进程
May 09 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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实现批量查询清除一句话后门的代码
2008/01/20 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
抽象方法、抽象类怎样声明
2014/10/25 面试题
经理秘书找工作求职信
2013/12/19 职场文书
教学评估实施方案
2014/03/16 职场文书
公司委托书格式范文
2014/04/04 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
创业计划书之花店
2019/09/20 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL