Как вы находите размеры элемента "display: none"?

У меня есть дочерние элементы внутри div, которые применяют к нему CSS display: none, и я хочу узнать, что представляют собой размеры дочерних элементов. Как я могу это сделать?

Скриншот Демо

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';

#some-hidden-div{
  display: none;
}
.whats-my-dims{
  width: 69px;
  height: 42px;
  background-color: #f00;
}

<div id='output'>Processing... :p</div>
<div id='some-hidden-div'>
  <div class='whats-my-dims' id='whats-my-dims1'></div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>

Ответ 1

Используйте window.getComputedStyle()

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + window.getComputedStyle(wmd1).getPropertyValue("width") 
+ '", "' 
+ window.getComputedStyle(wmd1).getPropertyValue("height") 
+ '", wmd2: "' 
+ window.getComputedStyle(wmd2).getPropertyValue("width") + '", "' 
+ window.getComputedStyle(wmd2).getPropertyValue("height") + '"';

#some-hidden-div{
  display: none;
}
.whats-my-dims{
  display:block;
  width: 69px;
  height: 42px;
  background-color: #f00;
}

<div id='output'>
  Processing... :p
</div>
<div>
  Sooo... How do I get the width and height of whats-my-dims1?
</div>
<div id='some-hidden-div'>
  <div class='whats-my-dims' id='whats-my-dims1'></div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>

Ответ 2

Вы не можете найти размеры элемента с display: none, но вы можете включить дисплей, получить размеры и затем установить его обратно в скрытое. Это не вызовет каких-либо визуальных различий.

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var someHiddenDiv = document.querySelector('#some-hidden-div');
someHiddenDiv.style.display = 'block';
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
someHiddenDiv.style.display = 'none';

#some-hidden-div {
  display: none;
}
.whats-my-dims {
  width: 75px;
  height: 42px;
  background-color: #f00;
}

<div id='output'>
  Processing... :p
</div>
<div>
  Sooo... How do I get the width and height of whats-my-dims1?
</div>
<div id='some-hidden-div'>
  <div class='whats-my-dims' id='whats-my-dims1'></div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>

Ответ 3

Вы не можете получить размеры элемента с display: none, потому что, поскольку он скрыт, он не занимает места, поэтому он не имеет размеров. То же самое относится к его детям.

Вместо этого вы можете сделать элемент видимым некоторое время, проверить размеры дочернего элемента и сделать элемент невидимым. Как указал @JanDvorak:

Браузеры не перерисовываются, когда работает синхронный Javascript, поэтому элемент никогда не должен появляться на экране.

Пример кода:

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var wmd2 = document.getElementById('whats-my-dims2');
var hiddenDiv = document.getElementById("some-hidden-div");
hiddenDiv.style.display = "block";
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
hiddenDiv.style.display = "";

См. демо на JS Fiddle.

Ответ 4

Вы можете добавить это:

var wmd1Style = window.getComputedStyle(wmd1);
o.innerHTML = 'wmd1: "' + parseInt(wmd1Style['width'], 10) + '", "' + parseInt(wmd1Style['height'], 10) + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';