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

我有div溢出滾動內的輸入。 JSFIDDLE 獲取div滾動內輸入的高度 - javascript

在這裏，當我點擊tab我應該能夠得到該輸入的高度。

第一個輸入：高度10px; - 點擊標籤

第二個輸入：高度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

如何實現這一目標的屬性？

來源

2017-09-01 Matarishvan

-1

爲了計算每個元素距離父元素頂端的距離，您在尋找.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>

注意.offsetTop僅適用於直接父：

在下面的例子中，我通過遍歷getElementsByTagName()做到這一點。如果您想計算DOM中距離較高的元素的距離，則需要遍歷所有可用父項並總結其偏移量。

希望這會有所幫助！ :)

來源

2017-09-01 04:03:23

不！我想從div頂部找到焦點輸入的高度。假設焦點是在第一個輸入，我應該得到的高度是10px ..如果焦點在第三個輸入，高度應該是30px .. – Matarishvan

@Matarishvan - 我的歉意;我現在明白你的意思了。我已經更新了我的答案以涵蓋此:) –

要計算元素距div頂部（滾動後）的距離，需要使用div的scrollTop屬性和輸入元素的offsetTop屬性。假設你已經對這些元素的引用，你作出這樣的計算：

var currentPosition = inputElement.offsetTop - divElement.scrollTop;

來源

2017-09-01 05:18:13

我得到解決@Matarishvan

這裏是我的代碼，你只需要使用焦點事件，並獲取該元素

的高度

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

來源

2017-09-01 05:40:28

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

回答

相關問題