JS使用getComputedStyle()方法获取CSS属性值


Posted in Javascript onApril 23, 2014

在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下:

1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css">里面的属性。

<span style="font-family:Arial;font-size:14px;"><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> 
<html xmlns=”http://www.w3.org/1999/xhtml“> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 
<title>JS获取CSS属性值</title> 
<style type=”text/css”> 
<!? 
.ss{color:#cdcdcd;} 
?> 
</style> 
</head> <body> 
<div id=”css88″ class=”ss” style=”width:200px; height:200px; background:#333333″>JS获取CSS属性值</div> 
<script type=”text/javascript”> 
alert(document.getElementById(“css88″).style.width);//200px 
alert(document.getElementById(“css88″).style.color);//空白 
</script> 
</body> 
</html> </span>

2. IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法

“DOM2级样式”增强了document.defaultView,提供了getComputedStyle()方法。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:after”)。如果不需要伪元素信息,第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算的样式。以下面的HTML页面为例:

<span style="font-family:Arial;font-size:14px;"><!DOCTYPE html> 
<html> 
<head> 
<title>计算元素样式</title> 
<style> 
#myDiv { 
background-color:blue; 
width:100px; 
height:200px; 
} 
</style> 
<body> 
<div id ="myDiv" style="background-color:red; border:1px solid black"></div> 
<script> 
var myDiv = document.getElementById("myDiv"); 
var computedStyle = document.defaultView.getComputedStyle(myDiv, null); 
alert(computedStyle.backgroundColor); //"red" 
alert(computedStyle.width); //"100px" 
alert(computedStyle.height); //"200px" 
alert(computedStyle.border); //在某些浏览器中是“1px solid black” 
</script> 
</body> 
</head> 
</html></span>

边框属性可能也不会返回样式表中实际的border规则(Opera会返回,但其它浏览器不会)。存在这个差别的原因是不同浏览器解释综合属性的方式不同,因为设置这种属性实际上会涉及很多其他的属性。在设置border时,实际上是设置了四个边的边框宽度、颜色、样式属性。因此,即使computedStyle.border不会在所有浏览器中都返回值,但computedStyle.borderLeftWidth则会返回值。

需要注意的是,即使有些浏览器支持这种功能,但表示值的方式可能会有所区别。例如,Firefox和Safari会返回将所有颜色转换成RGB格式。因此,即使getComputedStyle()方法时,最好多在几种浏览器中测试一下。

IE不支持getComputedStyle()方法,但它有一种类似的概念。在IE中,每个具有style属性的元素还有一个currentStyle属性。这个属性是CSSStyleDeclaration的实例,包含当前元素全部计算后的样式。取得这些样式的方法差不多,如下:

<span style="font-family:Arial;font-size:14px;">var myDiv = document.getElementById("myDiv"); 
var computedStyle = myDiv.currentStyle; 
alert(computedStyle.backgroundColor); //"red" 
alert(computedStyle.width); //"100px" 
alert(computedStyle.height); //"200px" 
alert(computedStyle.border); //undefined</span>

与DOM版本的方式一样,IE也没有返回border样式,因为这是一个综合属性。

3. 我自己在写测试case过程中写的一个简单的函数(适用于Chrome):

<span style="font-family:Arial;font-size:14px;">function getCSS(div){ 
return document.defaultView.getComputedStyle(div, null); 
//return div.currentStyle;//没用过,IE 
}</span>
Javascript 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
javascript数字时钟示例分享
Apr 23 #Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 #Javascript
iframe实用操作锦集
Apr 22 #Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 #Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 #Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 #Javascript
Area 区域实现post提交数据的js写法
Apr 22 #Javascript
You might like
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP安全上传图片的方法
2015/03/21 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
php数组和链表的区别总结
2019/09/20 PHP
js模拟滚动条(横向竖向)
2013/02/22 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
总结Python编程中函数的使用要点
2016/03/20 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python简单贪吃蛇开发
2019/01/28 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python如何实现定时器功能
2020/05/28 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
网游商务专员求职信
2013/10/15 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python