は私ではJavaScript /活字体の機能を記述し、高さ

Question

によってDOM要素が等しいください：あなたは、動的に、いくつかの入力（EL1）にいくつかのボタン（EL2）を添付したいとき

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

これは典型的な状況です。

el2の高さをel1にしたいと思っていますが、できません。高さを返す

1. 可能なすべてのコール私のために無力されています： 二つの問題があります。言い換えれば

   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 
   

は、いくつかの指定された要素の高さを計算するためにあらゆる可能性はありますか？

2. el2の高さの設定方法は？ （1）と同じ問題である「箱サイズ」さえ知らない。

これらのタスクはJS + HTML DOMでは不可能ですか？

Answer 1

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の部分ととせずに動作して比較してください。

これが役立ちます。

Answer 2

私が望む要素に等しい高さを設定する方法です。 高さを同じにするクラス名を要素に付けます。

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

まず、このような関数を作成：bodyタグを閉じる前にそれを呼び出すその後

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> 

また、この機能を呼び出すことができます資料。 これは要素の高さを計算し、同じ高さに設定し、イメージでも同じことを行います。

私はそれが役に立ちそうです。