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系列(13) This? Yes,this!
Jan 18 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
Javascript玩转继承(三)
May 08 Javascript
详解Bootstrap插件
Apr 25 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
layui选项卡效果实现代码
May 19 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
使用JS来动态操作css的几种方法
Dec 18 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
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
12步教你理解Python装饰器
2016/02/25 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
赔偿协议书范本
2014/09/12 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android