display: noneの要素は、高さも幅も取れない

2013/09/21 01:57:52

opacity: 0 or visibility: hidden のものは取れる。

うーむ。

その子要素も同様に取れない。

うーーむ。

検証コード

Html

<div id="js-target1" class="is-hidden js-target">
  <div id="js-target-inner1" class="js-target-inner">
      display: none
  </div>
</div>

<div id="js-target2" class="is-invisible js-target">
  <div id="js-target-inner2" class="js-target-inner">
      visibility: hidden
  </div>
</div>

<div id="js-target3" class="is-transparent js-target">
  <div id="js-target-inner3" class="js-target-inner">
      opacity: 0
  </div>
</div>

Css

.js-target {
    background-color: #ddd;
    padding: 5px;
}

.js-target-inner {
    background-color: #eee;
}

.is-hidden { display: none; }
.is-invisible { visibility: hidden; }
.is-transparent { opacity: 0; }

JavaScript

// コレは取得できない
console.group('display: none');
console.log(document.getElementById('js-target1').offsetHeight);
console.log(document.getElementById('js-target-inner1').offsetHeight);
console.groupEnd();

// コレはOK
console.group('visibility: hidden;');
console.log(document.getElementById('js-target2').offsetHeight);
console.log(document.getElementById('js-target-inner2').offsetHeight);
console.groupEnd();

// コレもOK
console.group('opacity: 0');
console.log(document.getElementById('js-target3').offsetHeight);
console.log(document.getElementById('js-target-inner3').offsetHeight);
console.groupEnd();

どうするか

display:none の代わりに、 translate3d とかで吹き飛ばす！　しかないと思ってるなう。

ちなみに、ZeptoさんもjQueryさんも、height()メソッド持ってまして、
なんかelement.styleの方まで探しに行ったりかなり頑張ってるのですが、同じ結果になります。