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

【问题标题】：javascript: finding the absolute size of an anchored linkjavascript：查找锚定链接的绝对大小
【发布时间】：2011-01-04 04:43:25
【问题描述】：

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

编辑：

这里有一些代码来说明我的意思（只要按下鼠标就会调用 press 函数）：

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;
                }
            }


}

例如，当我遇到带有图片的链接时，它不会返回正确的尺寸。

谢谢

【问题讨论】：

标签： javascript hyperlink height width position

【解决方案1】：

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

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

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

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

【讨论】：

其实我不太关心IE，因为我正在写一个iphone应用程序。我正在尝试通过坐标检测链接上的点击（我不想使用 touchstart 事件）。
@bobince，我用非常简单的 html <a href="#"><img onclick="press(event);" src="http://sstatic.net/so/img/logo.png" /></a> 行测试了他的代码，它返回 15 作为 offsetHeight - 这可能是 WebKit 中 offsetHeight 的错误实现吗？
@Andy E：这将是行高的正确值；请记住 a 和 img 默认情况下都是内联元素。如果图像比线高，它会在视觉渲染中溢出，但a 元素本身不会拉伸以适应它。将overflow:hidden; 添加到a 元素会告诉你我的意思。
如果您希望 a 包含其内联内容，您始终可以将其设为块或内联块。然而，这一切都应该是完全没有必要的。看看event.target 元素。
@NickFitz：我认为这可能是a 元素的行高。奇怪的是，将 img 放在 span 标签中解决了这个问题，所以 a 元素会拉伸到 span 标签的大小，而不是 img 标签的大小。

【解决方案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>

但是在<img>标签周围包裹一个<span>标签，像这样：

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

【讨论】：

我进行了一些测试，但我认为您所说的不是真的。我还附上了一些代码 - 也许它有问题。
@Alex1987：你在哪些浏览器中测试过它？它在 IE6-8 中运行良好，但 Chrome 返回的 offsetHeight 值不正确。我没有在这台机器上安装 Firefox 或 Opera，所以我无法在这些机器上进行测试。不过，我怀疑这是 Chrome 中的一个错误。阅读developer.mozilla.org/en/Determining_the_dimensions_of_elements 了解偏移尺寸的详细说明。
Safari 和 mobileSafari（在 iphone 上） - 也会返回不正确的 offsetHeight 值！！
Safari 使用与 Chrome (WebKit) 相同的渲染引擎
@Alex1987：我想出了一个解决方法。将<span> 标签包裹在<img> 标签周围，它可以工作 - 请参阅我的更新答案。

【解决方案3】：

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

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

【讨论】：