javascript - 使用 JavaScript 获取计算属性

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>

或者

纯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() 方法与 currentStyle 和 runtimeStyle Internet Explorer 中的属性）以及浏览器对某些属性使用的不同术语。