元素：getClientRects() 方法

getClientRects() 是 Element 接口的一个方法，它返回一个 DOMRect 对象的集合，这些对象指示客户端中每个 CSS 边框框的边界矩形。

大多数元素每个元素只有一个边框框，但多行内联级元素（例如默认情况下，多行 <span> 元素）在每一行周围都有一个边框框。

返回值是一个 DOMRect 对象的集合，每个对象对应于与元素关联的每个 CSS 边框框。每个 DOMRect 对象都以像素为单位描述边框框，其左上角相对于视口的左上角。对于带有标题的表格，即使标题在表格的边框框之外，也会将其包含在内。当在除外部 <svg> 之外的 SVG 元素上调用时，生成的矩形相对于的“视口”是元素的外部 <svg> 建立的视口（并且需要明确的是，矩形也会根据外部 <svg> 的 viewBox 变换进行变换，如果有的话）。

计算矩形时会考虑视口区域（或任何其他可滚动元素）的滚动量。

返回的矩形不包含可能发生溢出的任何子元素的边界。

对于 HTML <area> 元素、自身不渲染任何内容的 SVG 元素、display:none 元素以及通常任何未直接渲染的元素，都会返回一个空列表。

即使对于边框盒为空的 CSS 盒，也会返回矩形。left、top、right 和 bottom 坐标仍然可能是有意义的。

可能存在小数像素偏移。

示例

这些示例使用各种颜色绘制客户端矩形。请注意，绘制客户端矩形的 JavaScript 函数通过类 withClientRectsOverlay 与标记连接。

HTML

示例 1：此 HTML 创建了三个段落，每个段落内都有一个 <span>，每个段落都嵌入在一个 <div> 块中。为第二个块中的段落和第三个块中的 <span> 元素绘制客户端矩形。

html

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

示例 2：此 HTML 创建了三个有序列表。为第二个块中的 <ol> 和第三个块中的每个 <li> 元素绘制客户端矩形。

html

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

示例 3：此 HTML 创建了两个带标题的表格。为第二个块中的 <table> 绘制客户端矩形。

html

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

CSS

CSS 在第一个示例中围绕每个 <div> 块中的段落和 <span> 绘制边框，在第二个示例中围绕 <ol> 和 <li> 绘制边框，在第三个示例中围绕 <table>、<th> 和 <td> 元素绘制边框。

css

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

JavaScript

JavaScript 代码为分配了 CSS 类 withClientRectsOverlay 的所有 HTML 元素绘制客户端矩形。

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. */
  const rects = elt.getClientRects();
  for (const rect of rects) {
    const tableRectDiv = document.createElement("div");
    tableRectDiv.style.position = "absolute";
    tableRectDiv.style.border = "1px solid red";
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    const 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);
  }
}

(() => {
  /* Call function addClientRectsOverlay(elt) for all elements with
     assigned class "withClientRectsOverlay" */
  const elts = document.getElementsByClassName("withClientRectsOverlay");
  for (const elt of elts) {
    addClientRectsOverlay(elt);
  }
})();