如何使用JavaScript查找设置为"auto"的元素的实际渲染值

Question

假设我有以下html,没有CSS

<div> 
  here is some content in this div. it stretches it out
  <br />and down too!
</div>

现在我想获得浏览器将此div渲染为的实际像素宽度和高度.

可以用JS完成吗？

谢谢.

Answer 1

尝试获取对div的引用并阅读offsetWidth和offsetHeight属性:

var myDiv = document.getElementById('myDiv');
var width = myDiv.offsetWidth; // int
var height = myDiv.offsetHeight;

offsetWidth/Height累积测量元素的边框,水平填充,垂直滚动条(如果存在,如果渲染)和CSS宽度.它是元素在文档中使用的整个空间的像素值.我想这就是你想要的.

如果那不是你的意思,而你只想要元素width和height(即不包括填充,边距等),请尝试getComputedStyle:

var comStyle = window.getComputedStyle(myDiv, null);
var width = parseInt(comStyle.getPropertyValue("width"), 10);
var height = parseInt(comStyle.getPropertyValue("height"), 10);

上面的值将是width和heightcss样式属性的最终计算像素值(包括由<style>元素或外部样式表设置的值).

像所有有用的东西一样,这在IE中不起作用.

你说你正在使用jQuery.嗯现在很简单,并且跨浏览器工作:

var width = $('div').css('width');
var height = $('div').css('height');

使用jQuery你不需要这个答案的第一部分,所有这一切都照顾你;)