getComputedStyle与currentStyle获取样式(style/class)
更新时间：2013年03月19日 16:21:14 作者：
通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了，感兴趣的朋友可以了解下
大家都知道，用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>
相关文章
提起购物车想必只有在一些购物网站上才可以看得到，下面为大家介绍下使用js实现的购物车，感兴趣的朋友可以参考下2013-12-12
这篇文章主要为大家详细介绍了微信小程序实现手写板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了如何通过JS实现日历简单算法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要介绍了微信小程序实现多行文字 超出部分省略号显示功能，比如设置只显示2行，超出部分省略号显示，本文通过实例代码给大家介绍,需要的朋友可以参考下2019-10-10
JavaScript中的document.querySelector()方法使用详解
HTML的DOM querySelector()方法可以不需要额外的jQuery等支持,也可以方便的获取DOM元素,语法跟jQuery类似,这篇文章主要给大家介绍了关于JavaScript中document.querySelector()方法使用的相关资料,需要的朋友可以参考下2024-06-06
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
在项目中我们常用到百度分享插件或者bshare分享插件，虽然官方都有自定义按钮的功能，但是毕竟还是只有少数几种，我们如何来制作有自己特色的分享按钮呢？2014-06-06
这篇文章主要介绍了canvas轨迹回放功能实现过程以及相关的代码整理，跟着小编一起学习下吧。2017-12-12
这篇文章主要介绍了JS/jQuery实现获取时间的方法及常用类,结合完整实例形式分析了javascript针对日期时间的获取、转换、计算与检测相关操作技巧,需要的朋友可以参考下2019-03-03
本文主要介绍了javascript history对象的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了在 javascript 中快速获取数组指定位置的元素,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
最新评论