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（即不包括填充，边距等），请尝试{{3 }}：

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

上面的值将是width和height css样式属性的最终计算像素值（包括由<style>元素或外部样式表设置的值。）

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

你说你正在使用jQuery。嗯现在很简单，并且跨浏览器工作：

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

使用jQuery，你不需要这个答案的第一部分，所有这一切都由你来处理;）

Answer 2

使用框架（例如Prototype）的一个好处是框架作者通常会解决可移植性问题。即使您不使用该框架，它仍然可以阅读。在Prototype的情况下，用于读取元素尺寸的代码解释了Safari问题，并允许您读取当前未显示的元素的宽度。

getDimensions: function(element) {
  element = $(element);
  var display = $(element).getStyle('display');
  if (display != 'none' && display != null) // Safari bug
    return {width: element.offsetWidth, height: element.offsetHeight};

  // All *Width and *Height properties give 0 on elements with display none,
  // so enable the element temporarily
  var els = element.style;
  var originalVisibility = els.visibility;
  var originalPosition = els.position;
  var originalDisplay = els.display;
  els.visibility = 'hidden';
  els.position = 'absolute';
  els.display = 'block';
  var originalWidth = element.clientWidth;
  var originalHeight = element.clientHeight;
  els.display = originalDisplay;
  els.position = originalPosition;
  els.visibility = originalVisibility;
  return {width: originalWidth, height: originalHeight};
},

Answer 3

对于jQuery框架，.height和.width完成这项工作。

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

3 个答案: