divスクロール内の入力の高さを取得する - javascript

Question

divオーバーフロースクロール内に入力があります。

ここで、tabをクリックすると、その入力の高さを取得できるはずです。

最初の入力：高さ10px; - クリックされたタブ

第2入力：高さ20px;

私はこれを達成するためにどのようにactiveElement

nextInput {...} [Object, HTMLInputElement] 
[Methods] {...} er 
clientTop 2 Number 
clientWidth 562 Number 
COMMENT_NODE 8 Number 
complete false Boolean   
ng339 742 Number 
nodeName "INPUT" String 
scrollHeight 46 Number 
scrollLeft 0 Number 
scrollTop 0 Number 
scrollWidth 562 Number 
selectionEnd 0 Number 
selectionStart 0 Number 
size 20 Number  
willValidate false Boolean 

の性質を持っていますか？

Answer 1

各要素が親の上からの距離を計算するには、.offsetTopを探しています。 .offsetTopのみ直接の親に動作することを

var elements = document.getElementsByTagName('input'); 
 
for (var i = 0; i < elements.length; i++) { 
 
    elements[i].onclick = function() { 
 
    console.log(this.offsetTop); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="max-height:80px;overflow:auto;width:210px;"> 
 
    <input type="text" style="height:10px"> 
 
    <input type="text" style="height:20px"> 
 
    <input type="text" style="height:30px"> 
 
    <input type="text" style="height:20px"> 
 
</div>

注：次の例では

、私はgetElementsByTagName()以上をループすることにより、これを行います。 DOMの上位の要素からの距離を計算する場合は、使用可能なすべての親をループし、そのオフセットを集計する必要があります。

希望すると便利です。 :)

Answer 2

divの上部からスクロールした後の要素の距離を計算するには、divのscrollTopプロパティとinput要素のoffsetTopプロパティを使用する必要があります。あなたはこれらの要素への参照を持っていると仮定すると、あなたはこのような計算します：私はここに

@Matarishvanソリューションを持っ

var currentPosition = inputElement.offsetTop - divElement.scrollTop; 

Answer 3

が私のコードで、あなただけのフォーカスイベントを使用し、その要素

の高さを取得する必要があります

<div > 
    <form> 
     <input type="text" placeholder="first input"></input> 
     <input id="secondtext" type="text" placeholder="second text"></input> 
    </form> 
</div> 

<script> 

$(document).ready(function() { 
    $("input").hover(function(){ 
     var val = $(this).height(); 
     console.log(val); 
    }); 
}) 
</script>