如何使用Javascript获取基于id的元素div的高度？

Question

当悬停元素时，将显示div。我有几个这样的元素。因此，每个div都有一个唯一的id，每个都有自己的高度。要对齐光标旁边的div - 类，我需要知道它的个别高度。

这是对我所得到的内容的提取（请注意我用****标记的行）：

$('.rsshover').mouseleave(function() {
    var id = $(this).attr('id').replace("did_", "");
    $("#pre_"+id).hide();
});    

// cache the selector
var follower = $(".preview");
var IDHeight = ****???****
var xp = 0, yp = 0;
var loop = setInterval(function(){
    xp += (mouseX + 15 - xp) / 12;
    yp += (mouseY - ****IDHeight**** - yp) / 12;
    follower.css({left:xp, top:yp});
}, 0);

因此，我可以在fiddle中查看我希望获得的内容，并输入特定高度的值，例如yp += (mouseY - 200 - yp) / 12;。

a元素位于页面底部。因此，隐藏的div需要向上增长，这意味着div的起始参考点应该是左下角，而是向下构建它需要向上增长。

所以我不知道如何解决这个问题。如果有人可以帮助我，我将不胜感激。提前谢谢。

这是它应该是什么样子以及我想要实现的目标。我需要在该行yp += (mouseY - **HEIGHTVALUE** - yp) / 12;

中手动手动输入两个不同的高度

Answer 1

由于你已经在使用jquery，你可以通过$('#someid').height();得到任何div的高度

Answer 2

以下示例提供了您所寻求的功能。

var mouseX = 0, mouseY = 0, limitX = 320, limitY = 15;
$('.alink').mousemove(function(e){
   var id = $(this).attr('id').replace("id_", "");    
    // get the current hidden div selector
    var follower = $("#div_to_id_"+id);
    follower.show();
    // change 12 to alter damping higher is slower
    follower.animate({
    left: e.pageX,
    top: e.pageY-(follower.height()+30),
    height: "auto"
  }, 10, function() {    
  });   
});
$('.alink').mouseleave(function() {
        $(".hiddendivs").hide(); 
}); 

a {
    display: inline-block;
    width:320px;
    height:15px;   
    position:relative;
    margin-top: 150px;
    background-color: red;
}

.hiddendivs {
  background: green;
	color: #fff;
  width: 310px;
  padding: 15px; 
  position:fixed;
  z-index: 1;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="alink" id="id_1">
  <div class="hiddendivs" id="div_to_id_1">	
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temp...</p>
  </div>
</a>
          
<a href="#" class="alink" id="id_2">
  <div class="hiddendivs" id="div_to_id_2">	
    <p>some other content...</p>
  </div>
</a>

更新了Fiddle