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 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
关于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中调用JAVA
2006/10/09 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
python的绘图工具matplotlib使用实例
2014/07/03 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python线程池threadpool使用篇
2018/04/27 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Python 随机按键模拟2小时
2020/12/30 Python
八年级语文教学反思
2014/02/11 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
反对邪教标语
2014/06/30 职场文书
小学生成绩单评语
2014/12/31 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫