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

如何实现这一目标的属性？

答

为了计算每个元素距离父元素顶端的距离，您在寻找.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中距离较高的元素的距离，则需要遍历所有可用父项并总结其偏移量。

希望这会有所帮助！ :)

不！我想从div顶部找到焦点输入的高度。假设焦点是在第一个输入，我应该得到的高度是10px ..如果焦点在第三个输入，高度应该是30px .. – Matarishvan

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

答

要计算元素距div顶部（滚动后）的距离，需要使用div的scrollTop属性和输入元素的offsetTop属性。假设你已经对这些元素的引用，你作出这样的计算：

var currentPosition = inputElement.offsetTop - divElement.scrollTop;

答

我得到解决@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>

获取div滚动内输入的高度 - javascript

相关推荐