获取不可见元素的高度

Get invisible element height

本文关键字：高度 元素 获取      更新时间：2023-09-26

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

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

加载页面时可能不隐藏文本，然后获取高度并用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>

您需要渲染元素以获得其高度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
// http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply
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>

正如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;
}
相关文章：