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之通用简单的table选项卡实现(二)
May 09 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 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+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
python调用java的Webservice示例
2014/03/10 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Django框架多表查询实例分析
2018/07/04 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
python操作链表的示例代码
2020/09/27 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
道德模范先进事迹
2014/02/14 职场文书
语文教研活动总结
2014/07/02 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
商业门面租房协议书
2014/11/25 职场文书
2014司机年终工作总结
2014/12/05 职场文书
三行辞职书范文
2015/02/26 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL