我确信这是之前提出的，但没有在网络上得到足够的答案。JavaScript边框高度功能 - 匹配两个元素

我的index页面包含两列，这两列是可视的，并且被垂直线（边界）等分。为了实现这个，我在第一个（左）列上使用了border-right属性。

如何编写一个JS函数总是与两列的边框高度相匹配？

更新：我为这两列使用css nth-child1和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;

来源

2016-02-03 Liroy

'$（ '＃COL2'）的高度（$（'＃COL1。 '）.height（））'表示'col2'与'col1'具有相同的高度，但它取决于col2和1内的所有内容。 – Praveen

看到你用jQuery标记了这个，我假设你正在使用它。使用jQuery来选择两列并比较它们的高度。然后将较小高度设置为与较大列相同的高度。 – NaNpx

@ Praveen - 只要这两列是静态的，它就会工作。但是，当它们的长度延长时（JS动画），不会保持相同的高度。 – Liroy

-1

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; 
}

来源

2016-02-03 06:00:55 lwd931227

什么是在这里使用边界宽度属性。上面的代码没有意义。 – Praveen

您可以添加一个解释，说明它的作用以及它对原始问题的帮助？ – Kenster

-2

这不是一个只有JavaScript的解决方案，但它是一个CSS唯一的解决办法...

使用CSS background财产。

创建一个1x1图片并重复父容器。

来源

2016-02-03 06:02:50

??我认为这个问题与背景无关 – Praveen

这里只是一个CSS的解决方案：

DEMO

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>

来源

2016-02-03 06:24:39 Todd

JavaScript边框高度功能 - 匹配两个元素

回答

DEMO

相关问题