我確信這是之前提出的，但沒有在網絡上得到足夠的答案。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

相關問題