获取不可见元素高度

Question

所以我需要找到一个元素的高度来正确地过渡它。我的问题是这个元素最初没有高度，因为它会弄乱我的网站布局。

此值根据用于查看网站的设备而变化，它是我的文本框的高度。

或许可以在不隐藏文本的情况下加载页面，然后获取高度并使用 javascript 隐藏它，但我认为这根本不是一个理想的解决方案。

我的目标是无论页面是纯图像还是显示文本，在这两种情况下，所有内容都应垂直和水平居中。

document.getElementById("intro-img").onclick = function() {
  $("#intro-img").toggleClass('show');
  $("#text").toggleClass('show');
}

.full-size {
  height: 100vh;
  overflow: hidden;
}
.title-img {
  max-height: 250px;
}
#intro-img {
  cursor: pointer;
  height: 250px;
  transition: all 0.75s linear;
}
#intro-img.show {
  height: 125px;
}
#text {
  opacity: 0;
  height: 0;
  transition: all 0.75s linear;
  overflow: hidden;
}
#text.show {
  opacity: 1;
  height: 105px; /* I need this value set based on vw */
}
.container {
  margin-left: auto !important;
  margin-right: auto !important;
}
.row {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container full-size valign-wrapper">
    <div class="row">
      <div class="col s12 center-align">
        <img id="intro-img" class="responsive-img title-img" src="http://undeadleech.com/img/UndeadLeech_x3_round.png">
      </div>
      <div id="text" class="col s12 center-align">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
</body>

Answer 1

您需要渲染元素以获得其高度 AFAIK，考虑到这一点如何

最初通过设置 height: auto（忽略 height: 0）
获取元素的高度
删除插入的内联样式，即 height: auto
使用您拥有的这个特殊规则创建一个 <style> 标签

重要说明：如果您调整页面大小，请不要忘记使用新高度重新创建样式

var $text = $('#text')
$text.css({ height: 'auto' })
var height = $text.css('height')
$text.css({ height: '' })

// runtime style taken from
// 
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#text.show { height: ' + height + ' }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById("intro-img").onclick = function() {
  $("#intro-img").toggleClass('show');
  $("#text").toggleClass('show');
}

.full-size {
  height: 100vh;
  overflow: hidden;
}
.title-img {
  max-height: 250px;
}
#intro-img {
  cursor: pointer;
  height: 250px;
  transition: all 0.75s linear;
}
#intro-img.show {
  height: 125px;
}
#text {
  opacity: 0;
  height: 0;
  transition: all 0.75s linear;
  overflow: hidden;
}
#text.show {
  opacity: 1;
  /*height: 105px; /* I need this value set based on vw */
}
.container {
  margin-left: auto !important;
  margin-right: auto !important;
}
.row {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

<body>
  <div class="container full-size valign-wrapper">
    <div class="row">
      <div class="col s12 center-align">
        <img id="intro-img" class="responsive-img title-img" src="http://undeadleech.com/img/UndeadLeech_x3_round.png">
      </div>
      <div id="text" class="col s12 center-align">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
</body>

Answer 2

如 Mauricio Poppe 所说，要获得大小，您必须对其进行渲染。但这没问题，因为您可以渲染它而不使其可见：将 opacity 设置为 0 以使其完全透明。

function testHeight(obj) {
  obj.className += " invisible";

  // Insert it as first child
  if (document.body.childNodes[0]) {
    document.body.insertBefore(obj, document.body.childNodes[0]);
  } else {
    document.body.appendChild(obj);
  }
  var height = obj.clientHeight;

  document.body.removeChild(obj);
  obj.className = obj.className.replace("invisible", "");

  return height;
}

.invisible {
  opacity: 0;
  z-index: -1000000000; /* Move to the back */
  display: block; /* Needed for z-index */
  pointer-events: none;
}

获取不可见元素高度

Get invisible element height

html

javascript

css

materialize