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

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

javascript html css

使用Javascript匹配两个HTML元素的高度,javascript,html,css,Javascript,Html,Css,我有一个侧边栏，偶尔会扩展到主内容（）之外。当出现这种情况时，我想通过将边栏的最大高度设置为与主要内容的高度相匹配来剪裁边栏的高度（注意：我使用的是blogger，因此修复HTML比它的价值更麻烦，这就是为什么我宁愿找到一个JS解决方案。）我正在尝试的脚本如下所示： <!DOCTYPE html> <html> <style type="text/css"> .text1 {border:1px solid red;} .text2 {bo

我有一个侧边栏，偶尔会扩展到主内容（）之外。当出现这种情况时，我想通过将边栏的最大高度设置为与主要内容的高度相匹配来剪裁边栏的高度
（注意：我使用的是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>


.text1{边框：1px实心红色；}
.text2{边框：1px纯蓝色；溢出：滚动；}
洛雷姆·伊普苏姆·多洛。。。
Lorem ipsum dolor sit amet，是一位杰出的献身者。我的生活充满活力。这是一个精英和独裁者。埃尼安在奥古斯都。
函数边栏（）{
document.getElementsByClassName（“text2”）.style.maxHeight=document.document.getElementsByClassName（“text1”）.clientHeight；
}

如果您希望在一个高度相同的容器中包含两个元素，那么最简单的方法是：-

.parent_container {
display: flex;
}

只需添加一个包含这些div（.parent_container）和 Flexbox将处理其余部分。

尝试以下操作：

$（“.text2”）.height（$（“.text1”）.height（））

您的代码不起作用，因为在代码中您试图从任何数组（而不是从DOM节点）读取和写入属性

document.getElementsByCassName（）

函数返回一个DOM节点数组。无法在此数组上读取或写入特定于DOM的属性。您需要使用索引符号从此数组中选择一个DOM节点。例如，第一个元素可以选择为

document.getElementsByClassName（'text1'）[0]

等。此外，您还需要运行函数，如下所示：

（函数侧栏（）{
document.getElementsByClassName（“text2”）[0]。style.maxHeight=document.getElementsByClassName（“text1”）[0]。clientHeight+'px'；
})();
.text1{
边框：1px纯红；
浮动：左；
宽度：70%；
}
.text2{
边框：1px纯蓝色；
溢出y：滚动；
浮动：对；
宽度：25%；
}
Lorem ipsum dolor。。。我爱你…我爱你…我爱你…我爱你…我爱你…我爱你…我爱你…我爱你…我爱你…我爱你…我爱你…我爱你…我爱你…我爱你。。。
Lorem ipsum dolor sit amet，是一位杰出的献身者。我的生活充满活力。这是一个精英和独裁者。埃尼安在奥古斯对决中。奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆多洛…奥雷姆伊普苏姆伊普苏姆多洛改用和
请注意，您的函数也需要执行，我还将CSS更改为overflow:auto，所以滚动条仅在需要时显示

函数侧栏（）{
document.querySelector（“.text2”）.style.maxHeight=window.getComputedStyle（document.querySelector（“.text1”），null）.getPropertyValue（“高度”）；
};
边栏（）；/*添加了*/
.text1{边框：1px实心红色；}
.text2{边框：1px纯蓝色；溢出：自动；}
Lorem ipsum door sit amet，一位杰出的领导者。我的生活充满活力。这是一个精英和独裁者。埃尼安在奥古斯都。Lorem ipsum dolor sit amet，是一位杰出的献身者。我的生活充满活力。这是一个精英和独裁者。埃尼安在奥古斯都。
Lorem ipsum dolor sit amet，是一位杰出的献身者。我的生活充满活力。这是一个精英和独裁者。埃尼安在奥古斯都。Lorem ipsum dolor sit amet，是一位杰出的献身者。我的生活充满活力。这是一个精英和独裁者。埃尼安在奥古斯都。Lorem ipsum dolor sit amet，是一位杰出的献身者。我的生活充满活力。这是一个精英和独裁者。埃尼安在奥古斯都返回一个活动数组，而不是数组。@LGSon是的，你说得对。事实上，我的意图是编写“类似数组的对象”，但我使用的是“数组”：