时间戳

首页 > 解决方案 > 使用 on resize 设置 div 高度？

javascript - 使用 on resize 设置 div 高度？

问题描述

我这里有这种情况。我有 2 个左右 div，它现在的工作方式是，如果左边 div 的高度超过右边 div 的高度，该函数使高度相等并隐藏左边 div 的任何额外文本，这有效大多数情况下都很好，但是发生的情况是，当我更改窗口的高度或在不同的屏幕尺寸上测试它时，它似乎弄乱了左侧 div 的高度，而且它也没有将其设置回原来的高度。

这是一个演示链接。只需更改不同的屏幕尺寸，然后退出响应模式，您就会看到问题。

var leftContainer = document.getElementById('overflow_text')
var rightContainer = document.getElementById('offset_height')
var readToggle = document.getElementById('toggle_text')
var elem = document.querySelector('.readMore')
var fullText = elem.textContent;
var truncated = false;
var rightOffsetHeight = rightContainer.offsetHeight;
var leftOffsetHeight = leftContainer.offsetHeight;
console.log(leftOffsetHeight)
console.log(rightOffsetHeight)

function mounted() {
  if (leftOffsetHeight > rightOffsetHeight) {
    leftContainer.style.height = rightOffsetHeight + "px"
    readToggle.style.display = 'block'
    readToggle.innerHTML = 'Read More'
    while (leftContainer.scrollHeight > leftContainer.offsetHeight) {
      var wordArray = leftContainer.innerHTML.split(' ');
      wordArray.pop();
      leftContainer.innerHTML = wordArray.join(' ') + '...';
      truncated = true
    }
  } else {
    readToggle.style.display = 'none'
  }
}


function showText() {
  if (truncated) {
    leftContainer.innerHTML = fullText
    leftContainer.style.height = 'auto'
    readToggle.innerHTML = 'Read Less'
    readToggle.style.position = 'relative'
    truncated = false
  } else {
    leftContainer.style.height = rightOffsetHeight + "px"
    while (leftContainer.scrollHeight > leftContainer.offsetHeight) {
      var wordArray = leftContainer.innerHTML.split(' ');
      wordArray.pop();
      leftContainer.innerHTML = wordArray.join(' ') + '...';
      readToggle.innerHTML = 'Read More'
      truncated = true
    }
  }
}

function watchSize() {
  var w = window.outerWidth;
  var h = window.outerHeight;
  console.log(w)
  console.log(h)
}
#toggle_text {
  cursor: pointer;
}

#offset_height {
  font-size: 16px;
}
<body onLoad='mounted()' onresize='watchSize()'>
  <p id="demo"></p>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p id='overflow_text' class="readMore">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
          vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
          Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices.Lorem
          ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum., nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices Sed dapibus pulvinar nibh tempor porta.Lorem ipsum
          dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices.Maecenas nisl est, ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
          nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
        </p>
        <span id="toggle_text" onClick='showText()'>Read More</span>
      </div>
      <div class="col-md-6">
        <p id="offset_height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae sceula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue
          ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. scelerisque enim
          ligula venenatis dolor. Maecenas nisl estDonec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
          nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est.
          Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enimt.</p>
      </div>
    </div>
  </div>
</body>

希望有人能够提出一些解决方案。这将帮助我很多。提前谢谢大家。

标签： javascripthtmlcss

解决方案

我使用此代码调整开发高度 onresize

new ResizeSensor(jQuery('#divId'), function(){ 
console.log('content dimension changed');
});

推荐阅读