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

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/srcElement。事实上，这是唯一可靠的方法。考虑一个分成两行文本的链接。现在你得到的是一个非矩形区域；您无法使用简单的 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>

但是将 标签包裹在 标签周围，如下所示：

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

要获取元素的位置，请使用此问题的答案：检索HTML 元素的位置 (X,Y)