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 相关文章推荐
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 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
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
学习vue.js计算属性
2016/12/03 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
Python struct模块解析
2014/06/12 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python与字符编码问题
2019/05/24 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
入党积极分子介绍信
2014/01/17 职场文书
检举信的格式及范文
2014/04/04 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
文艺节目主持词
2015/07/06 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
python画条形图的具体代码
2022/04/20 Python