Question

如何使用JavaScript获取元素的计算属性。它甚至可能吗？我看过Chrome显示了li和a等元素的计算属性。我只是觉得我可以使用JavaScript获得同样的东西。每当我尝试时，它都显示未定义。

Answer 1

您可以使用offsetWidth和offsetHeight：

var width = document.getElementById('elementId').offsetWidth;

更多信息：https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

您可能还想看一下：http://www.quirksmode.org/dom/getstyles.html

修改：

您可能还需要考虑：window.getComputedStyle(element)。与offsetX有关的子像素渲染存在问题。

此处有更多信息：http://vadikom.com/dailies/offsetwidth-offsetheight-useless-in-ie9-firefox4/

Answer 2

强烈建议使用jQuery。

用法：

HTML：

<img src="img_src.png" id="img1" />

jQuery的：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    alert('width: ' + $('#img1').width());
    alert('height: ' + $('#img1').height());
    alert('left offset: ' + $('#img1').offset().left);
    alert('top offset: ' + $('#img1').offset().top);
});
</script>

OR

纯javascript：

<script type="text/javascript">
window.onload = function() {
    var img = document.getElementById('img1');
    alert('width: ' + img.width);
    alert('height: ' + img.height);
}
</script>

希望有所帮助

Answer 3

如果您使用的是jQuery，可以通过.css（）

访问css道具

http://api.jquery.com/css/

.css（）方法是从第一个匹配元素获取样式属性的便捷方法，特别是考虑到浏览器访问大多数这些属性的不同方式（基于标准的浏览器中的getComputedStyle（）方法与Internet Explorer中的currentStyle和runtimeStyle属性）以及浏览器用于某些属性的不同术语。

使用JavaScript获取计算属性

3 个答案: