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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
Angularjs过滤器使用详解
May 25 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
原生JavaScript实现留言板
Jan 10 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框架Phpbean说明
2008/01/10 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
React-router v4 路由配置方法小结
2017/08/08 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
为Python的web框架编写前端模版的教程
2015/04/30 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Django异步任务线程池实现原理
2019/12/17 Python
python属于哪种语言
2020/08/16 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
店长岗位的工作内容
2013/11/12 职场文书
年度考核自我评价
2014/01/25 职场文书
农贸市场管理制度
2014/01/31 职场文书
函授药学自我鉴定
2014/02/07 职场文书
学生会干部任命书
2015/09/21 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
python单向链表实例详解
2022/05/25 Python