Question

在使用＆＃34; zoom＆＃34;转换元素后，我无法获取元素的坐标。属性。我需要知道所有4个角的坐标。我通常会使用getBoundingClientRect属性来完成此操作，但是当元素被缩放时，它似乎无法正常工作。我附上了一个简短的jsfiddle链接，以显示什么似乎不起作用。我使用Chrome但这种行为也出现在Firefox上。

http://jsfiddle.net/GCam11489/0hu7kvqt/

HTML：

<div id="box" style="zoom:100%">Hello</div><div></div><div></div>

JS：

var div = document.getElementsByTagName("div");
div[1].innerHTML = "PreZoom Width: " + div[0].getBoundingClientRect().width;
div[0].style.zoom = "150%";
div[2].innerHTML = "PostZoom Width: " + div[0].getBoundingClientRect().width;

当我运行该代码时，＆＃34; 100＆＃34;显示缩放前后宽度。

我发现了很多信息，但我发现的一切似乎都说它是Chrome上的一个已知错误，并且已经修复。有谁知道如何纠正这个问题或者我可能做错了什么？

Answer 1

关于错误报告的

This comment会详细介绍。问题，但它的状态似乎是'WontFix'，所以你可能在那里运气不好。

一些替代方案：

如果您使用transform: scale(1.5)而不是缩放，则会在getBoundingClientRect()中获得正确的值，但会导致页面布局混乱。
您可以使用window.getComputedStyle(div[0]).zoom获取元素的缩放值（小数）并将其乘以getBoundingClientRect()的宽度

Answer 2

这是一个很老的帖子，但是我遇到了同样的问题，我在一个小面板上有一个角材料项目，该项目的像素比率小于1，这使得所有内容都非常小。为了解决这个问题，我在主体上添加了一个缩放以解决此问题。

角度材料（7）滑块使用getBoundingClientRect()来确定其位置，这使滑块比我希望的更远。

我使用了上面提到的eruditespirit之类的解决方案。

if (Element.prototype.getBoundingClientRect) {
  const DefaultGetBoundingClientRect = Element.prototype.getBoundingClientRect;
  
  Element.prototype.getBoundingClientRect = function () {
    let zoom = +window.getComputedStyle(document.body).zoom;
    let data = DefaultGetBoundingClientRect.apply(this, arguments);

    if (zoom !== 1) {
      data.x = data.x * zoom;
      data.y = data.y * zoom;
      data.top = data.top * zoom;
      data.left = data.left * zoom;
      data.right = data.right * zoom;
      data.bottom = data.bottom * zoom;
      data.width = data.width * zoom;
      data.height = data.height * zoom;
    }

    return data;
  };
}

CSS Zoom属性不适用于BoundingClientRectangle

2 个答案:

一些替代方案：