如何在使用外部样式表的javascript对象上访问样式属性？

Question

我有一个外部样式表:

.box {
padding-left:30px;
background-color: #BBFF88;
border-width: 0;
overflow: hidden;
width: 400px;
height: 150px;
}

然后我有这个:

<div id="0" class="box" style="position: absolute; top: 20px; left: 20px;">

当我然后尝试访问div的宽度时:

alert(document.getElementById("0").style.width);

出现一个空白警报框.如何访问样式表中定义的width属性？

注意:div显示正确的宽度.

Answer 1

你应该window.getComputedStyle用来获得这个价值.我建议不要使用offsetWidth或者clientWidth如果你正在寻找CSS值,因为那些返回包括填充和其他计算的宽度.

使用getComputedStyle,您的代码将是:

var e = document.getElementById('0');
var w = document.defaultView.getComputedStyle(e,null).getPropertyValue("width");

MDC上提供了相关文档:window.getComputedStyle