Question

我需要计算页面中每个锚定链接的位置，高度和宽度。我知道如何找到x，y坐标，但我的高度和宽度有问题。当链接中有子项（图像，div等）时会出现问题，因此heightOffset和widthOffset将不起作用。有没有办法做到这一点，而不是让所有的孩子和计算他们的大小？

编辑：

这是一些代码来演示我的意思（只要按下鼠标就会调用按下功能）：

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}

function getHeight(elem) {

          if (elem.style.pixelHeight) {
             return elem.style.pixelHeight;
          } else {
             return elem.offsetHeight;
          }
    }
function getWidth(elem) {

    if (elem.style.pixelWidth) {
       return elem.style.pixelWidth;
    } else {
       return elem.offsetWidth;
    }
}

function press(e)
{


      x= e.pageX;
      y= e.pageY;

    window.alert(x+","+y);


            var links = document.getElementsByTagName('a');
            for (i = 0; i < links.length; i++){
                var pos = findPos(links[i]);
                window.alert(x+","+y+" "+pos[0]+" " + pos[1] + " "+links[i].offsetWidth+ " "+links[i].offsetHeight);
                if (x >= pos[0] && x <= pos[0] + getWidth(links[i]) && y >= pos[1] && y <= pos[1] + getHeight(links[i])){
                    window.alert(links[i].href);
                    i = links.length;
                }
            }


}

例如，当我遇到与图片的链接时，它不会返回正确的大小。

由于

Answer 1

offsetWidth / Height在包含图片的链接上做了很多工作，只要你没有做过任何奇怪的事情，比如溢出或定位图片或其他子内容，以便它们脱离他们父母的内容区域。

您的代码在IE上没有使用offsetHeight，它使用的是pixelHeight，它不会像您认为的那样做。坚持offsetHeight。

相反，您使用的是event.pageX / Y，这是IE没有的非标准扩展程序。遗憾的是，从事件中获取页面相对坐标的唯一可靠方法是使用clientX / Y并调整视口滚动。

我真的不知道为什么你要努力枚举链接位置，对于鼠标点击/按下事件你可以非常可靠地获得使用event.target / {{1}点击的元素}。事实上，这是唯一可行的方法。考虑一个分为两个文本行的链接。现在你得到的是一个非矩形区域;您无法使用简单的x和y范围测试来测试特定鼠标位置是否位于该区域内。

Answer 2

正确的属性是offsetHeight（不是heightOffset）和offsetWidth（不是widthOffset）。
这些属性应该正确返回您之后的大小，因为子项将扩展元素以适应，假设溢出设置为可见。在任何情况下都无需计算孩子的大小。

offsetHeight和offsetWidth不属于任何标准，但大多数浏览器似乎都已将其实施。

由于你遇到Safari和offsetHeight的问题，也许你可以试试getClientRects()方法：

http://www.quirksmode.org/dom/tests/rectangles.html

var dims   = links[i].getClientRects()[0];
var width  = dims.right - dims.left;
var height = dims.bottom - dims.top;

不能说我曾经使用过getClientRects()。听起来结果可能更接近clientWidth和clientHeight。

进一步编辑
我想出了一个解决方法。以下不起作用：

<a href="#">
  <img onclick="press(event);" src="http://sstatic.net/so/img/logo.png" alt="" />
  <!-- onclick handler alerts with size 250x15 -->
</a>

但在<span>标记周围包含<img>标记，如下所示：

<a href="#"><span>
  <img onclick="press(event);" src="http://sstatic.net/so/img/logo.png" />
  <!-- onclick handler alerts with size 250x61 -->
</span></a>

解决了这个问题。至少，它确实在Chrome中，但就像我在Chrome和Safari共享WebKit渲染引擎之前所说的那样，所以它也适用于Safari。

Answer 3

您不应使用elem.style.*中的值来确定元素的大小。这些值是CSS样式，不可靠。仅使用offsetWidth和offsetHeight。

要获取元素的位置，请使用此问题的答案：Retrieve the position (X,Y) of an HTML element

javascript：查找锚定链接的绝对大小

3 个答案: