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

比如为某个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值，只是它并不是你想要的。

赞 (0)

相关推荐

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

    比如为某个HTML元素级联了一组样式信息,其中width属性的值为80px.然后调用脚本读取这个值,得到的结果总是一个空字符串,而事实上我想得到"80px".针对这种情况,David Flanagan在<JavaScript 权威指南>(第五版)一书中给出了解决方案. 以下是针对JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻译 脚本计算的样式 HTML元素的style属性相当于style

  • 教你如何通过JavaScript读取元素的样式

    教你如何通过JavaScript读取元素的样式

    目录 一.getComputedStyle() 1.getComputedStyle()是window的方法,可以获取元素当前的样式 2.两个参数 3.代码实例 4.浏览器效果 二.定义一个方法获取元素信息 1.代码实例 2.浏览器显示 三.clientWidth和clientHeight 1.这两个元素是获取元素的宽度和高度,不带px 2.这两个元素是只读的,不可修改 3.代码实例 4.浏览器展示 四.offsetWidth和offsetHeight 1.获取元素的整个的宽度和高度,包括内容区

  • 易语言通过读取文件获取WIFI信息的代码

    易语言通过读取文件获取WIFI信息的代码

    常量数据表 .版本 2 .常量 常量_临时目录, "<文本长度: 28>", , c:\users\public\tmp_wifipath 本地WIFI密码配置读取的代码 此功能需要加载精易模块5.6 .版本 2 .支持库 iext .支持库 eAPI .程序集 窗口程序集_启动窗口 .子程序 遍历文件 .如果 (文件是否存在 (#常量_临时目录)) 文件_枚举1 (#常量_临时目录, "*.xml", &S_遍历WIFI文件) .否则 信息框

  • 通过Javascript读取本地Excel文件内容的代码示例

    读取本地Excel文件内容的Javascript代码: 复制代码 代码如下: <script type="text/javascript">function read_excel(){ var filePath="D:\abcd9.com.xls"; //要读取的xls    var sheet_id=2; //读取第2个表    var row_start=3; //从第3行开始读取    var tempStr='';    try{       

  • 用Javascript读取CheckBox数组的值的代码(兼容IE与firefox)

    document.getElementsByName(name)方法正是用来读取对象数组的.用法如下: var elements = document.getElementsByName("role"); ("role"为CheckBox数组中每个CheckBox共同的名字) for: getElementsByName范例 function test(){ // 得到checkbox数组 var elements = document.getElementsByN

  • Javascript实现元素选择器功能

    本文实例为大家分享了Javascript实现元素选择器功能的具体代码,供大家参考,具体内容如下 什么是元素选择器? 用过jquery的开发者都知道,jquery封装了对元素的查找功能,即通过jquery的api获取页面元素的过程,该过程只需提供一个元素选择的条件字符串即可获取相应的满足条件的页面元素.元素选择器即是指通过条件字符串获取相应元素的一个工具函数. 元素选择器分为id选择器.class选择器.标签选择器以及属性选择器. id选择器即通过元素的id唯一标识获取元素. 类选择器即通过元素的

  • javascript获取元素CSS样式代码示例

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

  • javaScript 读取和设置文档元素的样式属性

    首先我们先说一下样式表属性 1. 内联样式即元素style属性里面设置的,级别最高 2. 页面样式表定义即页面<style></style>里面定义的,级别次之 3.外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值:没有则返回空 IE和火狐皆然,只是有的属性值返回可能不一样,比如像颜色火狐返回rgb,而IE是返

  • JavaScript 读取图片实例代码

    Untitled Page JavaScript读取图片测试例子 '); var a = 0; var b = 1; Loading(a,b); } //显示加载失败信息 function Gif_Err() { alert("载入失败!") } //显示加载成功信息 function Gif_End() { alert("载入完成!") } //加载图片,并显示 function Loading(a,b) { //当数组元素为空时,切换数组的一维 if (!Gif

  • JavaScript操作select元素和option的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

随机推荐