獲取div滾動中輸入的高度-javascript

Question

我在div溢出滾動內有輸入。 JSFIDDLE

在這里，當我單擊tab我應該能夠獲得該輸入的高度。

首先輸入：高度10像素； -點擊的標簽

第二輸入：高度20像素；

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

要計算元素到div頂部的距離（滾動之后），您需要使用div的scrollTop屬性和輸入元素的offsetTop屬性。 假設您對這些元素有引用，則進行如下計算：

var currentPosition = inputElement.offsetTop - divElement.scrollTop;

Answer 2

為了計算每個元素到其父元素頂部的距離，您需要尋找.offsetTop 。

在以下示例中，我通過遍歷getElementsByTagName()實現此目的：

 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> 

請注意， .offsetTop僅適用於直接父級。 如果要計算到DOM中較高元素的距離，則需要遍歷所有可用的父對象並總結其偏移量。

希望這可以幫助！ :)

Answer 3

我有解決方案@Matarishvan

這是我的代碼，您只需要使用focus事件並獲取該元素的高度

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