JavaScript 获取元素样式：offset 与 getComputedStyle 详解

JavaScript 获取元素样式：offset 与 getComputedStyle 详解

有时需要获取添加到元素或链接上的具体样式信息。由于style属性仅能读取内联样式，若要获取其他CSS规则定义的样式，需采用其他技术手段。

使用 offset 属性获取元素尺寸与位置

偏移量属性

在采用其他技巧之前，IE和Mozilla浏览器已提供了一种较为简便的方法：offset系列属性。利用这些属性，可以读取元素当前的一些关键样式信息。

例如，使用offsetWidth属性即可获取段落当前的宽度像素值。为了验证，可以调整窗口大小后再次运行代码进行测试。

相关代码实现如下：

 
function getOff()
{ 
x = document.getElementById('test');
return x.offsetWidth;
} 

接着通过警告框显示该值：alert('offsetWidth = ' + getOff())。

此时即可获取段落在用户浏览器中的像素值，进而进行相关计算。以下是其他可读取的属性列表：

offsetHeight：高度像素值

offsetLeft：距离左侧的像素值（具体参照物见下文）

offsetTop：距离顶部的像素值（具体参照物见下文）

offsetWidth：宽度像素值

需注意，这些属性均为只读，无法直接修改。

为便于说明，准备了一段示例代码。首先将段落定位。

随后将其宽度增加100像素。此时查看offsetWidth即可看到变化。同样，减少100像素后查看也可验证。

在两种浏览器中查看结果可能存在差异。在IE中，结果为原宽度加100像素；而在Mozilla中则不同。因为Mozilla更符合标准，仅计算内容宽度，而IE会将边距和边框宽度纳入计算。尽管Mozilla的计算方式更为准确，但个人更倾向于IE的直观性。

若不介意Mozilla与IE的兼容性差异，代码实现较为简单：

 
function changeOff(amount)
{ 
var y = getOff();
x.style.width = y + amount;
} 

向函数传递改变量amount，通过getOff()获取原始大小并存入y，最后利用原始大小与改变量重新设定元素大小。

offsetWidth/Top属性说明

关于其定义，请参阅上一章内容。

跨浏览器获取计算样式的方案

获取样式信息

可见offset属性存在较大局限性。浏览器提供了更便捷的元素样式访问方法，但其可靠性与通用性不及offset属性。

Mozilla 与 Opera 的 CSS 表达式偏好

Mozilla与Opera浏览器特性

Mozilla和Opera倾向于使用CSS表达式而非JavaScript属性名。例如，获取字体大小需使用CSS的font-size，而非JavaScript的fontsize。

Mozilla支持的样式较少。例如，border[-somthing]在Mozilla中返回空值，而Opera能给出准确值。

IE 浏览器的 currentStyle 特性

IE浏览器特性

在IE中可以获取大量样式信息，但需谨慎操作。在此例中，直接访问border无效，需分别访问borderStyle、borderWidth和borderColor。

注意，在JavaScript中访问border-width属性时，必须拼写为borderWidth，因为连字符可能被误认为减号。

此外，IE常返回auto值。虽然这是真实值，但实用性较低，因此有时仍需借助offset属性。

代码实现

代码依然简洁：

 
function getStyle(el,styleProp)
{ 
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
} 

首先传递元素ID及欲访问的样式名称。

function getStyle(el,styleProp) {

将元素保存在变量x中：

var x = document.getElementById(el);

首先是IE的方法：利用元素的currentStyle属性。

if (x.currentStyle) 2 var y = x.currentStyle[styleProp];
然后是Mozilla方法：使用getComputedStyle()方法，Opera同样适用。
[code] else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);

最后将y返回给调用该函数的程序。

return y;
} 

尽管该函数并非完美，但已尽力实现跨浏览器兼容。

翻译地址：http://www.quirksmode.org/dom/getstyles.html

转载请保留以下信息

作者：北玉(tw:@rehawk)