Я не могу найти ясную ссылку на использование этих функций:
getBBox()
vs getBoundingClientRect()
vs getClientRects()
.
Не могли бы вы объяснить, что они делают и каковы координаты (и их ссылочные), которые они возвращают?
Я не могу найти ясную ссылку на использование этих функций:
getBBox()
vs getBoundingClientRect()
vs getClientRects()
.
Не могли бы вы объяснить, что они делают и каковы координаты (и их ссылочные), которые они возвращают?
getBBox определен в спецификации SVG, он возвращает координаты в локальной системе координат после применения преобразований.
getBoundingClientRect и getClientRects определены в спецификации CSSOM их основное отличие состоит в том, что они возвращают координаты во внешней системе координат SVG.
некоторые элементы (например, тег span
) будут иметь несколько ClientRects, когда они будут перенесены на несколько строк. MDN Element.getClientRects()
и BoundingRect - это union для ClientRects элемента. MDN Element.getBoundingClientRect()
Это пример, который я копирую из MDN Element.getClientRects() и добавляю функцию addBoundingClientRectOverlay для сравнения addClientRectsOverlay. Вы можете видеть, что красный прямоугольник - из getClientRects, а черный - из getBoundingClientRect, поэтому вы можете сказать, что другое.
function addClientRectsOverlay(elt) {
// Absolutely position a div over each client rect so that its border width
// is the same as the rectangle width.
// Note: the overlays will be out of place if the user resizes or zooms.
var rects = elt.getClientRects();
for (var i = 0; i != rects.length; i++) {
var rect = rects[i];
var tableRectDiv = document.createElement("div");
tableRectDiv.style.position = "absolute";
tableRectDiv.style.border = "1px solid red";
var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft =
document.documentElement.scrollLeft || document.body.scrollLeft;
tableRectDiv.style.margin = tableRectDiv.style.padding = "0";
tableRectDiv.style.top = rect.top + scrollTop + "px";
tableRectDiv.style.left = rect.left + scrollLeft + "px"; // we want rect.width to be the border width, so content width is 2px less.
tableRectDiv.style.width = rect.width - 2 + "px";
tableRectDiv.style.height = rect.height - 2 + "px";
document.body.appendChild(tableRectDiv);
}
}
function addBoundingClientRectOverlay(elt) {
// Absolutely position a div over each client rect so that its border width
// is the same as the rectangle width.
// Note: the overlays will be out of place if the user resizes or zooms.
var rect = elt.getBoundingClientRect();
var tableRectDiv = document.createElement("div");
tableRectDiv.style.position = "absolute";
tableRectDiv.style.border = "1px dashed #321";
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft =
document.documentElement.scrollLeft || document.body.scrollLeft;
tableRectDiv.style.margin = tableRectDiv.style.padding = "0";
tableRectDiv.style.top = rect.top + scrollTop+1 + "px";
tableRectDiv.style.left = rect.left + scrollLeft+1 + "px"; // we want rect.width to be the border width, so content width is 2px less.
tableRectDiv.style.width = rect.width - 4 + "px";
tableRectDiv.style.height = rect.height - 4 + "px";
document.body.appendChild(tableRectDiv);
}
(function() {
/* call function addClientRectsOverlay(elt) for all elements with assigned css class "withClientRectsOverlay" */
var elt = document.getElementsByClassName("withClientRectsOverlay");
for (var i = 0; i < elt.length; i++) {
addClientRectsOverlay(elt[i]);
addBoundingClientRectOverlay(elt[i]);
}
})();
strong {
text-align: center;
}
div {
display: inline-block;
width: 150px;
}
div p,
ol,
table {
border: 1px solid blue;
}
span,
li,
th,
td {
border: 1px solid green;
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects -->
<h3>A paragraph with a span inside</h3>
<p>Both the span and the paragraph have a border set. The client rects are in red. Note that the p has only one border box, while the span has multiple border boxes.</p>
<div>
<strong>Original</strong>
<p>
<span>Paragraph that spans multiple lines</span>
</p>
</div>
<div>
<strong>p rect</strong>
<p class="withClientRectsOverlay">
<span>Paragraph that spans multiple lines</span>
</p>
</div>
<div>
<strong>span rect</strong>
<p>
<span class="withClientRectsOverlay">Paragraph that spans multiple lines</span>
</p>
</div><h3>A list</h3>
<p>Note that the border box doesn't include the number, so neither do the client rects.</p>
<div>
<strong>Original</strong>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</div>
<div>
<strong>ol rect</strong>
<ol class="withClientRectsOverlay">
<li>Item 1</li>
<li>Item 2</li>
</ol>
</div>
<div>
<strong>each li rect</strong>
<ol>
<li class="withClientRectsOverlay">Item 1</li>
<li class="withClientRectsOverlay">Item 2</li>
</ol>
</div><h3>A table with a caption</h3>
<p>Although the table border box doesn't include the caption, the client rects do include the caption.</p>
<div>
<strong>Original</strong>
<table>
<caption>caption</caption>
<thead>
<tr><th>thead</th></tr>
</thead>
<tbody>
<tr><td>tbody</td></tr>
</tbody>
</table>
</div>
<div>
<strong>table rect</strong>
<table class="withClientRectsOverlay">
<caption>caption</caption>
<thead>
<tr><th>thead</th></tr>
</thead>
<tbody>
<tr><td>tbody</td></tr>
</tbody>
</table>
</div>