Question

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

此值会根据用于查看网站的设备及其文本框的高度而变化。

有可能加载页面而不隐藏文本然后获取高度并用javascript隐藏它，但我相信它根本不是理想的解决方案。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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
// 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>

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;
}

获得不可见的元素高度

2 个答案: