Question

我正在尝试设置相对于另一个div的div高度。 'gridimg'中有一个图像，'gridtext'有文本，所以当页面调整大小时，包含文本的div会改变高度。我在.js文件中有以下代码：

window.onresize = function resize() {

var right = document.getElementById('gridimg').style.height;
var left = document.getElementById('gridtext').style.height;

document.getElementById('gridimg').style.height=left;

});

我试图让它在调整窗口大小时调用此函数，因此div保持相同的大小，但它不起作用。我是外部JavaScript的新手，所以任何人都可以帮助我:)。

Answer 1

如果要读取元素高度，则必须使用offsetHeight属性。 style.height用于设置高度。

http://codepen.io/bajzarpa/pen/oZVOrL

Answer 2

我会编写一个函数来检查调整大小并得到#gridimg高度，就像这个答案：Call a function when window is resized

然后注意这样：

$(window).resize(function () {
    yourMethod( $('#gritext'));
});

类似：https://stackoverflow.com/a/15205712/6254070

Answer 3

以下是基于W3 Tryit松散地显示如何执行此操作的代码段：

<!DOCTYPE html>
<html>
<body onresize="myFunction()">

<style>
#thetext {
  width: 100%;
  height: 50px;
  display: block;
  clear: both;
  overflow: hidden;
}

#otherdiv {
  background-color: green;
  display: block;
  clear: both;
  overflow: hidden;
}
</style>

<p>Try to resize the browser window to display the windows height and width.</p>

<p id="demo"></p>

<div id="thetext"><strong>Note:</strong> this example will not work properly in IE8 and earlier. IE8 and earlier do not support the outerWidth/outerHeight propery of the window object.</div>

<div id="otherdiv"></div>

<script>
function myFunction() {

    setTimeout(function() {
      var sourceEl = document.getElementById('thetext');
      var targetEl = document.getElementById('otherdiv');

var newHeight = sourceEl.offsetHeight;
//  || sourceEl.getBoundingClientRect().height;

      targetEl.width = sourceEl.offsetWidth;
      targetEl.style.height = newHeight + 'px';

      var w = targetEl.offsetWidth;
      var h = targetEl.offsetHeight;
      var txt = "Target size: width=" + w + ", height=" + h;
      document.getElementById('demo').innerHTML = txt;
    }, 0);
}
</script>

</body>
</html>

相对于另一个DIV动态设置DIV高度

3 个答案: