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全部源代码
May 04 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
Python 列表list使用介绍
2014/11/30 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
《画》教学反思
2014/04/14 职场文书
公司节能减排方案
2014/05/16 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python