JavaScript 边框高度函数 - 匹配两个元素

JavaScript Border Height Function--Match Two Elements

本文关键字：两个 元素 高度 边框 函数 JavaScript      更新时间：2023-09-26

我敢肯定这以前有人提出过，但在网上没有找到足够的答案。

我的index页面包含两列，这些列在视觉上由垂直线（边框）平均划分。为了实现这一点，我在第一列（左）列中使用了 border-right 属性。

如何编写始终与两列的边框高度匹配的 JS 函数？

更新：我正在为两列使用 css nth-child 1 和 2。

更新2：这样的事情怎么样？

function getHeight(class) {
    return document.getElementByClass(class).offsetHeight;
}
var maxHeight = Math.max( getHeight( "article:nth-child(odd)" ), getHeight( "article:nth-child(even)" );
var nOdd = document.getElementByClass( "article:nth-child(odd)" );
var nEven = document.getElementByClass( "article:nth-child(even)" );
nOdd.style.height = maxHeight;
nEven.style.height = maxHeight;

这是一个仅限 css 的解决方案：

演示

.css

.wrapper {
  display: flex;
}
section {
  flex: 1;
}
section:first-child {
  border-right: 1px solid gray;
}

.html

<div class="wrapper">
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus sum dolor sit amet, consectetur adipisicing elit. Ducimus assumenda tempore, obcaecati similique mollitia, ipsa dolorum nihil  dolor </section>
  <section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus assumenda tempore, obcaecati similique mollitia, ipsa dolorum nihil placeat maiores eius cupiditate ipsam harum recusandae, quia accusamus. Quae a illo, amet.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus assumenda tempore, obcaecati similique mollitia, ipsa dolorum nihil placeat maiores eius cupiditate ipsam harum recusandae, quia accusamus. Quae a illo, amet.
  </section>
</div>

function getBorderHeight(){
    var el = document.getElementsByClassName('.border')[0];
    var c_height = el.style.height;
    var b_height = el.style.borderWidth;
    return c_height+b_height*2;
}

这不是一个只有Javascript的解决方案，但它是一个只有CSS的解决方案......

使用 CSS background属性。

创建一个 1x1 图片并对父容器重复此操作。

相关文章：