製作DOM元素的高度

等於我編寫JavaScript /打字稿功能：製作DOM元素的高度

function setElementsHeightsEqual(el1: HTMLElement, el2: HTMLElement) { 
    ... 
}

這是典型的情況，當你想一些按鈕（EL2）連接到一些輸入（EL1）動態。

我想讓el2的高度等於el1，但我無法做到。有兩個問題：

所有可能的調用返回的高度無奈的對我來說：

el1.offsetWidth; // will return 0 if document is not rendered yet 
el1.style.height; // will return "" if it is set inside external CSS 
el1.style.paddingTop; // the same 
el1.style.paddingBottom; // the same

換句話說是否有可能確定某些特定元素的高度？

如何設置el2的高度？我們甚至不知道其「盒子大小」，與（1）中的問題相同。

這些任務在JS + HTML DOM中是不可能的嗎？

來源

2017-03-12 Komi Dumity

'offsetHeight'返回什麼？ – adelowo

我可以給你一個通用的解決方案，如果你能夠使用jQuery – alireza

@alireza，請嘗試。如果jQuery可以做任何事情，這也可以在/翻譯成純JS。 –

offsetHeight是一種安全的方式。如果元素沒有加載，請將函數調用移至window.onload。

在這裏，你有一個工作的例子：

function setMaxHeight(...elements) { 
 
    console.log(elements); 
 
    // Get max height 
 
    var height = 0; 
 
    for(let element of elements) { 
 
    console.log(element.offsetHeight); 
 
    if(element.offsetHeight > height) height = element.offsetHeight; 
 
    } 
 
    
 
    // Change all elements height to max. 
 
    for(let element of elements) { 
 
    element.style.height = height + 'px'; 
 
    } 
 
} 
 

 

 
window.onload = function() { 
 
    var object1 = document.querySelector('.object1'); 
 
    var object2 = document.querySelector('.object2'); 
 
    var object3 = document.querySelector('.object3'); 
 
    setMaxHeight(object1, object2, object3); 
 
};

.object1 { 
 
    border: 1px solid #000; 
 
    display: block; 
 
    float: left; 
 
    height: 50px; 
 
    width: 20%; 
 
} 
 

 
.object2 { 
 
    border: 1px solid #0cc; 
 
    display: block; 
 
    float: left; 
 
    height: 120px; 
 
    width: 30%; 
 
} 
 

 
.object3 { 
 
    border: 1px solid #afc; 
 
    display: block; 
 
    float: left; 
 
    height: 20px; 
 
    width: 10%; 
 
}

<div id="container"> 
 
    <div class="object1">Text</div> 
 
    <div class="object2">Text2</div> 
 
    <div class="object3">Text3</div> 
 
</div>

比較有和沒有的Javascript運行部分。

我希望這會有所幫助。

來源

2017-03-12 15:56:24 nitobuendia

我已經告訴大部分不是關於「未加載」，我說的是「未呈現」的情況。例如，您想要創建元素，並在完成後將它們添加到DOM中。在創建階段，您無法瞭解其CSS屬性（和高度）。因此，添加呈現回調（如通過MutationObserver或「加載」事件偵聽器）看起來非常棘手，比實現這種事情的正確方式更加黑客。 –

這是我設置與我想要的元素相等的高度的方式。給你的元素一個類名，你想讓它們的高度相同。

<div class="sameElementHeight"> 
    <img src="/path/to/Image" class="sameImageHeight"> 
    <p>YOUR TEXT</p> 
</div> 
<div class="sameElementHeight"> 
    <img src="/path/to/Image" class="sameImageHeight"> 
    <p>YOUR TEXT</p> 
</div> 
<div class="sameElementHeight"> 
    <img src="/path/to/Image" class="sameImageHeight"> 
    <p>YOUR TEXT</p> 
</div>

首先，創建這樣的函數：

equalheight = function(container){ 

    var currentTallest = 0, 
     currentRowStart = 0, 
     rowDivs = new Array(), 
     $el, 
     topPosition = 0; 
    jQuery(container).each(function() { 

     $el = jQuery(this); 
     jQuery($el).height('auto') 
     topPostion = $el.position().top; 

     if (currentRowStart != topPostion) { 
      for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
       rowDivs[currentDiv].height(currentTallest); 
      } 
      rowDivs.length = 0; // empty the array 
      currentRowStart = topPostion; 
      currentTallest = $el.height(); 
      rowDivs.push($el); 
     } else { 
      rowDivs.push($el); 
      currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 
     } 
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
      rowDivs[currentDiv].height(currentTallest); 
     } 
    }); 
}

然後結束標記之前調用它：

<script> 
    equalheight(".sameElementHeight"); 
    equalheight(".sameImageHeight"); 
</script> 
</body>

您也可以撥打此功能，當您添加新的元素，你的文件。它會計算元素的高度併爲它們設置相同的高度，對圖像也是如此。

我希望它有幫助。

來源

2017-03-12 22:23:57 alireza

製作DOM元素的高度

回答

相關問題