JavaScript 读取元素的CSS信息的代码


Posted in Javascript onFebruary 07, 2010

比如为某个HTML元素级联了一组样式信息,其中width属性的值为80px。然后调用脚本读取这个值,得到的结果总是一个空字符串,而事实上我想得到"80px"。针对这种情况,David Flanagan在《JavaScript 权威指南》(第五版)一书中给出了解决方案。

以下是针对JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻译
脚本计算的样式

HTML元素的style属性相当于style HTML 特性, 而作为style属性的值,CSS2属性对象只为这样的一个元素内联样式信息。这并不包括CSS级联里面的任何其他样式。有时你的确想知道确切的赋予某个元素的样式设置,同时忽略掉在级联里面的样式。你想要做的就是为元素计算样式。很不幸被计算的样式的名字是含糊的;它与在浏览器显示元素之前被执行的计算相关:所有的样式均被尝试能否适用于元素,并且所有适用的样式被合并在元素的任何内嵌样式中。这种聚集后的样式信息能够被用于正确的将元素表现在浏览器窗口中。在W3C标准中,用于决定元素被计算样式的API是window对象的getComputedStyle()方法。这个方法的第一个参数是期望被计算样式的元素。第二个参数是任何期望的CSS伪对象,比如":before"或者":after"。你很可能不会对伪对象感兴趣,但是在Mozilla和Firefox对于该方法的实现中,第二个参数是不能被忽略的。否则,由于它的第二个参数,你总是会发现getComputedStyle()引发null。getComputedStyle()的返回值是一个表现所有加载确定元素或者伪对象的样式的CSS2属性对象。与CSS2属性对象能够控制内嵌样式信息不同,getComputedStyle()返回的对象是只读的。IE不支持getComputedStyle()方法,但是提供了一个更简单的替代方案。每个HTML元素有一个currentStyle属性可以控制它被计算的样式。IE的这个API唯一的缺点就是它不能提供一个查询伪对象样式的方式。作为被计算样式的的一个例子,你可以使用如下的跨平台的代码来确认元素被表现的字型:

var p = document.getElementsByTagName("p")[0]; // Get first paragraph of doc 
var typeface = ""; // We want its typeface 
if (p.currentStyle) // Try simple IE API first 
typeface = p.currentStyle.fontFamily; 
else if (window.getComputedStyle) // Otherwise use W3C API 
typeface = window.getComputedStyle(p, null).fontFamily;

计算样式很快,而且它并不总是提供你想要的信息。考虑刚才字型的例子。font-family属性接受了一个逗号分隔的列表,轻松的为跨平台提供了被期望的字体类型。当你查询被计算的fontFamily属性时,你很容易得到确定的加在元素上的font-family样式的值。这或许返回一个值类似于"arial,helvetica,sans-serif",却并不告诉你究竟哪个字型才是真正正在使用的。类似的,如果一个元素没有被绝对定位,而企图通过被计算样式的top和left属性查询它的位置和大小,结果总是返回"auto"。这是一个完全合法的CSS值,只是它并不是你想要的。
Javascript 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
js实现弹幕飞机效果
Aug 27 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 #Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 #Javascript
JavaScript Event学习第七章 事件属性
Feb 07 #Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 #Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 #Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 #Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 #Javascript
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
使用Python对Access读写操作
2017/03/30 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Django的models模型的具体使用
2019/07/15 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
数控专业毕业生求职信范文
2013/09/21 职场文书
项目资料员岗位职责
2013/12/10 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
投资合作协议书
2014/04/17 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
大学活动总结范文
2014/04/29 职场文书
酒店辞职书范文
2015/02/26 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
导游词之吉林吉塔
2019/11/11 职场文书