getComputedStyle与currentStyle获取样式(style/class)


Posted in Javascript onMarch 19, 2013

大家都知道,用document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了。

DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,在IE中就获取到对象的左内边距了,兼容性的写法如下:

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

这样,就能在IE及FF中返回对象的当前样式信息了。

特别注意一点:如果要获取当前对象的颜色信息,IE返回的是16进制的'#ffffff',而FF返回的是rgb(255,255,255)

用js的style属性可以获得html标签的样式,但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle。下面是一个小示例:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js用currentStyle和getComputedStyle获取css样式</title> 
<style type="text/css"> 
#div1{width:100px; height:100px; background:red;} 
</style> 
<script type="text/javascript"> 
function getStyle(obj, attr) 
{ 
if(obj.currentStyle) 
{ 
return obj.currentStyle[attr]; 
} 
else 
{ 
return getComputedStyle(obj,false)[attr]; 
} 
} 
window.onload=function() 
{ 
var oDiv=document.getElementById('div1'); 
alert(getStyle(oDiv,'width')) 
} 
</script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html>
Javascript 相关文章推荐
传智播客学习之JavaScript基础篇
Nov 13 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
异步加载script的代码
Jan 12 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 #Javascript
input输入框的自动匹配(原生代码)
Mar 19 #Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 #Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 #Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 #Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 #Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 #Javascript
You might like
PHP编程网上资源导航
2006/10/09 PHP
php短址转换实现方法
2015/02/25 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python算法之栈(stack)的实现
2014/08/18 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Python通过Pillow实现图片对比
2020/04/29 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
通用求职信范文模板分享
2013/12/27 职场文书
环保倡议书范文
2014/05/12 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
入门学习Go的基本语法
2021/07/07 Golang
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏