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 相关文章推荐
JS 去除Array中的null值示例代码
Nov 20 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
JS实现图片切换特效
Dec 23 Javascript
微信小程序实现日历小功能
Nov 18 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
php发送post请求的三种方法
2014/02/11 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
晚会主持词开场白
2014/03/17 职场文书
安全生产承诺书
2014/03/26 职场文书
文明演讲稿范文
2014/05/12 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android