如何使用javascript可靠地查找HTML元素的位置_Javascript_Jquery_Html_Css

如何使用javascript可靠地查找HTML元素的位置

javascript jquery html css

如何使用javascript可靠地查找HTML元素的位置,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个html块，它由许多组成。我使用这些通过在目标时改变其不透明度来创建模式窗口（在CSS中完成）。这些通过id进行区分，并且都具有相同的类名。 s的边框为10px。鼠标悬停时，边框将更改为38px，仅适用于左右边框（在css中完成）。鼠标悬停时，我想显示后退和下一个箭头，使其正好出现在左右两侧边框的中间。不同的“div”有不同的高度我的做法：我已经使用event.target.id获取调用该函数的的id。然后我使用getBoundingClientRect（）在屏幕上获得该元素

我有一个html块，它由许多

组成。我使用这些

通过在

目标时改变其不透明度来创建模式窗口（在CSS中完成）。
这些
通过id进行区分，并且都具有相同的类名。
s的边框为10px。鼠标悬停时，边框将更改为38px，仅适用于左右边框（在css中完成）。
鼠标悬停时，我想显示后退和下一个箭头，使其正好出现在左右两侧边框的中间。不同的“div”有不同的高度
我的做法：
我已经使用event.target.id
获取调用该函数的
的id。
然后我使用getBoundingClientRect（）在屏幕上获得该元素的矩形表示。
我使用.top
.bottom
.left
.right
获得每四个点的x和y坐标。从这些点中，我找到高度，然后将
s.left
和.right设置为与之相等。
我使用了警报（）来返回结果，它有时返回正确的值，有时根本不返回任何值。返回的结果是这两种情况之一。而箭头并没有放在它们应该放的地方。我对Javascript还很陌生，我还在学习，所以如果您能解释一下您的答案，我将不胜感激。
HTML代码如下所示：
<html>
<head>
    <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="midpointHeight.js"></script>
    <script type="text/javascript" src="modalDialogHover.js"></script>
</head>

<!--first modal-->  
<a href="#X">
    <image src="X.gif" id="X" class="Gif" />
</a>
<div id="h" class="modalDialog">
 <div id="miniModal_h" class="miniModal" onmouseover="getMidPointHeight(event)">
  <a href="#close" title="Close" class="close" id="close"><div class="close_btn"></div></a>
  <a href="#p" title="Next" class="next" id="next"><div class="next_btn"></div></a>                 
  <p>
     <!--some text here-->
  </p>                              
 </div>
</div>


<!--second modal-->     
<a href="#p">
<image src="p.gif" id="p" class="Gif" />
</a>
<div id="p" class="modalDialog">
    <div id="miniModal_p" class="miniModal" onmouseover="getMidPointHeight(event)">
        <a href="#close" title="Close" class="close"><div class="close_btn"></div></a>
        <a href="#h" title="Back" class="back" id="back"><div class="back_btn"></div></a>
        <a href="#c" title="Next" class="next" id="next"><div class="next_btn"></div></a>
        <p>
            <!--some text here-->
        </p>
    </div>
</div>
</html>

在jQuery中，隐藏/显示面板上的左右按钮：
jQuery(document).ready(function(){
    jQuery(".miniModal").hover(
        function(){
            jQuery(".close_btn").addClass("visible"),
            jQuery(".next_btn").addClass("visible"),
            jQuery(".back_btn").addClass("visible")
        },
        function(){
            jQuery(".close_btn").removeClass("visible"),
            jQuery(".next_btn").removeClass("visible"),
            jQuery(".back_btn").removeClass("visible")
        }
    )
});

在javascript中查找中点高度并在正确位置显示箭头：
function getMidPointHeight(event){

    var miniModal= event.target.id;
    //alert(miniModal);

    var smallRect = document.getElementById(event.target.id).getBoundingClientRect();

    var sX = smallRect.left;
    var sY = smallRect.top;
    var sW = smallRect.right;
    var sH = smallRect.bottom;

    //alert(sX + "," + sY + "," + sW + "," + sH);

    var sHeight = (sH - sY);

    var smidHeight = (sHeight / 2);
    var arrow_loc = (smidHeight)+"px";

    alert(arrow_loc);

    var next_btn = document.getElementById("next_btn");
    next_btn.style.top = arrow_loc;

    var back_btn = document.getElementById("back_btn"); 
    back_btn.style.top = arrow_loc; 
}

建议您在jsfiddle.net中创建一个演示。整个问题听起来应该用纯CSS解决。我以前从未使用过jsfiddle.net，所以我不确定是否所有内容都正确。但这是我的尝试：Nit，还有更多的Div，我认为用javascript覆盖格式可能更容易。但我在想，如果我不能解决这个问题，我必须手动找到每个div的中点。
function getMidPointHeight(event){

    var miniModal= event.target.id;
    //alert(miniModal);

    var smallRect = document.getElementById(event.target.id).getBoundingClientRect();

    var sX = smallRect.left;
    var sY = smallRect.top;
    var sW = smallRect.right;
    var sH = smallRect.bottom;

    //alert(sX + "," + sY + "," + sW + "," + sH);

    var sHeight = (sH - sY);

    var smidHeight = (sHeight / 2);
    var arrow_loc = (smidHeight)+"px";

    alert(arrow_loc);

    var next_btn = document.getElementById("next_btn");
    next_btn.style.top = arrow_loc;

    var back_btn = document.getElementById("back_btn"); 
    back_btn.style.top = arrow_loc; 
}