JavaScript 获取元素计算样式：getComputedStyle 与 currentStyle 兼容方案

获取元素计算样式的方法与兼容性问题

例如，若为某HTML元素定义了级联样式，其中width属性值为80px。调用脚本读取该值时，结果常为空字符串，而实际期望获取"80px"。David Flanagan在《JavaScript权威指南》（第五版）中提供了此问题的解决方案。 以下是对《JavaScript: The Definitive Guide, 5th Edition》第16章第4节内容的翻译： 脚本计算的样式 HTML元素的style属性对应于HTML的style特性，其值构成的CSS2属性对象仅包含该元素的内联样式信息，不包含级联中的其他样式。有时需获取赋予元素的精确样式设置，忽略级联样式，即计算样式。不幸的是，"计算样式"一词含义模糊，它指浏览器显示元素前执行的计算过程：所有适用样式被尝试并合并至元素的任何内联样式中。这种聚合后的样式信息用于在浏览器窗口中正确呈现元素。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]; // 获取文档中的第一个段落元素
var typeface = ""; // 用于存储字体信息
if (p.currentStyle) // 优先尝试IE特有的API
typeface = p.currentStyle.fontFamily;
else if (window.getComputedStyle) // 否则使用W3C标准API
typeface = window.getComputedStyle(p, null).fontFamily;

计算样式的局限性说明

计算样式（computed style）的计算过程相对高效，但它提供的信息并不总是符合预期。以刚才的字体查询为例，font-family属性接受一个逗号分隔的字体列表，旨在提供跨平台的字体回退方案。当查询计算后的fontFamily属性时，你得到的是应用于该元素的所有字体名称的完整列表，例如"arial,helvetica,sans-serif"，但这并不能直接告诉你浏览器实际渲染使用的是哪一个字体。类似地，如果一个元素未采用绝对定位，试图通过计算样式的top和left属性查询其位置和尺寸，结果通常会返回"auto"。虽然"auto"是合法的CSS值，但它并非开发者真正需要的具体数值信息。