これらの関数の使用に関する明示的な参照は見つかりません: getBBox()
対getBoundingClientRect()
対getClientRects()
。getBBox()vs getClientRects()vs getClientRects()
あなたは彼らが何をしているのか、彼らが返す座標(およびその参考資料)は何ですか?
これらの関数の使用に関する明示的な参照は見つかりません: getBBox()
対getBoundingClientRect()
対getClientRects()
。getBBox()vs getClientRects()vs getClientRects()
あなたは彼らが何をしているのか、彼らが返す座標(およびその参考資料)は何ですか?
getBBoxはSVG specificationで定義されています。変換の適用後にローカル座標系の座標を返します。
getBoundingClientRectとgetClientRectsはCSSOM specificationで定義されていますが、主な違いは外側のSVG座標系の座標を返すことです。それらは複数の行にラップされている場合(span
タグのような)
一部要素が複数ClientRectsを持つことになります。 MDN Element.getClientRects()
とBoundingRectはClientRects要素のの組合です。 MDN Element.getBoundingClientRect()
これは私がMDN Element.getClientRects()からコピーして、私はaddClientRectsOverlayを比較するaddBoundingClientRectOverlay機能を追加する例です。 赤い四角形はgetClientRectsから得られ、黒はgetBoundingClientRectから得られますので、あなたは何が違うかを知ることができます。
function addClientRectsOverlay(elt) {
// Absolutely position a div over each client rect so that its border width
// is the same as the rectangle's 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's 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's rect</strong>
<p class="withClientRectsOverlay">
<span>Paragraph that spans multiple lines</span>
</p>
</div>
<div>
<strong>span's 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's rect</strong>
<ol class="withClientRectsOverlay">
<li>Item 1</li>
<li>Item 2</li>
</ol>
</div>
<div>
<strong>each li's 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's 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's rect</strong>
<table class="withClientRectsOverlay">
<caption>caption</caption>
<thead>
<tr><th>thead</th></tr>
</thead>
<tbody>
<tr><td>tbody</td></tr>
</tbody>
</table>
</div>
getBoundingClientRect' 'のための明示的な参照は、少なくとも容易である。https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect – Thriggle