使用Javascript匹配两个HTML元素的高度

Match height of two HTML elements using Javascript

本文关键字：HTML 两个 元素 高度 Javascript 使用      更新时间：2023-09-26

我有一个侧边栏，它偶尔会比主要内容扩展得更远（如这里所示）。当这种情况发生时，我想通过设置侧边栏的最大高度与主要内容的高度相匹配来剪裁侧边栏的高度
（注意：我使用的是blogger，所以修复HTML比这更麻烦，这就是为什么我宁愿找到JS解决方案的原因。）

我试图开始工作的脚本如下：

<!DOCTYPE html>
<html>
<style type="text/css">
    .text1 {border:1px solid red;}
    .text2 {border:1px solid blue;overflow:scroll;}
</style>
<body>
    <div class="text1">Lorem ipsum dolor...</div>
    <div class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div>
<script>
    function sidebar(){
        document.getElementsByClassName("text2").style.maxHeight = document.document.getElementsByClassName("text1").clientHeight;
    }
</script>
</body>
</html>

您的代码无法工作，因为在您的代码中，您试图从任何数组（而不是从DOM节点）读取和写入属性。document.getElementsByClassName()函数返回一个DOM节点数组。您不能在此数组上读取或写入DOM特定的属性。您需要使用索引表示法从这个数组中选择一个DOM节点。例如，第一元素可以被选择为CCD_ 2等。此外，你还需要运行你的功能，如下所示：

(function sidebar(){
  document.getElementsByClassName("text2")[0].style.maxHeight =  document.getElementsByClassName("text1")[0].clientHeight + 'px';
})();
.text1 {
  border:1px solid red;
  float: left;
  width: 70%;
}
.text2 {
  border:1px solid blue;
  overflow-y: scroll;
  float: right;
  width: 25%;
}
<div class="text1">Lorem ipsum dolor... Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...</div>
<div class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui.Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor...Lorem ipsum dolor... </div>

使用getComputedStyle和querySelector代替

注意，你的函数也需要执行，我还将你的CSS更改为overflow：auto，所以滚动条只在需要时显示

function sidebar(){
  document.querySelector(".text2").style.maxHeight = window.getComputedStyle(document.querySelector(".text1"),null).getPropertyValue("height");
};
sidebar();    /*  added  */
.text1 {border:1px solid red;}
.text2 {border:1px solid blue;overflow:auto;}
<div class="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div>
<div class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div>

注意2，您也可以使用closures来执行您的功能

(function sidebar(){
  document.querySelector(".text2").style.maxHeight = window.getComputedStyle(document.querySelector(".text1"),null).getPropertyValue("height");
})();

所以你的代码最终会看起来像这个

<!DOCTYPE html>
<html>
  <style type="text/css">
    .text1 {border:1px solid red;}
    .text2 {border:1px solid blue;overflow:auto;}
  </style>
  <body>
    <div class="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div>
    <div class="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa sed mi viverra dapibus. Ut pulvinar a elit et sollicitudin. Aenean at augue dui. </div>
    <script>
    (function sidebar(){
      document.querySelector(".text2").style.maxHeight = window.getComputedStyle(document.querySelector(".text1"),null).getPropertyValue("height");
    })();
    </script>
  </body>
</html>

如果你想在一个相同高度的容器中有两个元素，那么最简单的方法是：-

.parent_container {
display: flex;
}

只需添加一个div，它将同时包含这两个div（parent_container）和Flexbox将负责其余部分。

试试这个：

$(".text2").height($(".text1").height())

相关文章：