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 相关文章推荐
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
js获取域名的方法
Jan 27 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
Node.js Express安装与使用教程
May 11 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
Python 的 with 语句详解
2014/06/13 Python
Python抓取百度查询结果的方法
2015/07/08 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python中return的返回和执行实例
2019/12/24 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
python 字符串格式化的示例
2020/09/21 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
导师评语大全
2014/04/26 职场文书
《静夜思》教学反思
2016/02/17 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
vue中 this.$set的使用详解
2021/11/17 Vue.js
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android