Как найти фактические отображаемые значения элементов, установленных на «auto», используя JavaScript

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 и height css (включая значения, установленные элементом <style> или внешней таблицей стилей).

Как и все полезные вещи, это не будет работать в IE.

---

Вы говорите, что используете jQuery. Ну, теперь это тривиально, и работает кросс-браузер:

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

С jQuery вам не нужна первая часть этого ответа, все позаботились о вас;)

Answer 2

Для платформы jQuery .height и .width выполняют свою работу.

Answer 3

Одним из преимуществ использования инфраструктуры, такой как 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};
},