博客

HTML DOM getBoundingClientRect()方法

  • Post category:jquery
  1. HTML DOM getBoundingClientRect()方法概述

getBoundingClientRect()方法是一种可以返回元素大小及相对于视口左上角的位置的方法。其中，左上角是(0, 0)。这个方法会返回一个包含四个属性（left, top, right, bottom）的 DOMRect 对象，表示元素低左角和右上角的坐标。如果一个元素可以滚动，返回的坐标是相对与视口的。

  1. getBoundingClientRect()方法用法

使用 getBoudingClientRect() 方法可以获取元素的位置、高度和宽度并存储在一个对象中以进行程序控制。下面拟定一个使用场景：在一个装满图片和文字的容器div中进行图片在全图中的定位。

HTML文件：

<div
  class="image-container"
  style="
      height: 200px;
      border: 2px solid black;
      position: relative;
  "
>
  <img src="https://img.example.com/cat.jpg" alt="小猫咪" id="img" style="max-width: 75%; max-height: 75%;"/>
  <p>这是一只可爱的小猫咪</p>
</div>

Javascript文件：

var myImage = document.getElementById("img");

console.log(myImage.getBoundingClientRect());

/*
Output:
    {top: 14, right: 269, bottom: 154, left: 5, width: 264, height: 140}
*/

以上的代码中，我们使用了getElementById获取img元素，然后运用getBoundingClientRect获取了这个元素的位置与大小信息。 这个对象包含4个属性：top、left、right、bottom存储元素位置的上下左右的距离，width和height分别表示元素的宽度和高度。

现在，我们试试将图片放置为容器div中间：

var img = document.getElementById("img");
var imgWidth = img.getBoundingClientRect().width;
var imgHeight = img.getBoundingClientRect().height;
var containerWidth = img.parentNode.getBoundingClientRect().width;
var containerHeight = img.parentNode.getBoundingClientRect().height;

img.style.left = (containerWidth - imgWidth) / 2 + "px";
img.style.top = (containerHeight - imgHeight) / 2 + "px";
  1. 使用getBoundingClientRect()方法进行D3JS图表定位

D3是一个数据可视化库，用于将数据点集映射到可视图形。可以借助 D3 的方法来创建图表，但很常见的是需要细微粒度的控制。为了处理这些细节，需要使用getBoundingClientRect()来指定图表的位置。

下面是一种使用getBoundingClientRect()方法的例子，在正方形元素上附加一个图表。

HTML文件：

<div id="block-container" style="background-color: #f9b384; height: 500px;">
  <!-- 这是一个正方形的元素 -->
  <div id="block" style="background-color: #fff;height: 200px;width: 200px;position: relative;"></div>
</div>

Javascript文件：

var data = [60, 50, 80, 100, 200];
var x = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, 200]);

var chart = d3.select("#block")
  .append("svg")
  .attr("width", 200)
  .attr("height", 200);

var bars = chart.selectAll(".bar")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function (d, i) {
    return "translate(0," + i * 16 + ")";
  });

bars.append("rect")
  .attr("fill", "steelblue")
  .attr("width", function (d) {
    return x(d);
  })
  .attr("height", 12);

bars.append("text")
  .attr("fill", "white")
  .attr("x", function (d) {
    return x(d) - 3;
  })
  .attr("y", 6) // y-偏移值是基于底边水平线的
  .attr("text-anchor", "end")
  .text(function (d) {
    return d;
  });

// 计算图表的高度 - 这是从上一步中得到的正方形元素的高度
var chartHeight = chart.node().getBoundingClientRect().height;

// 计算用于垂直居中图表的偏移量
// （使用视口高度减去图表高度再除以 2）
var chartOffset = (window.innerHeight - chartHeight) / 2;

// 将这个偏移量设置为 SVG 元素的样式之一
chart.style("top", chartOffset + "px");

这里，我们使用 getBoundingClientRect() 方法来获得 SVG 图表本身的高度。我们将视图的高度（window.innerHeight）减去图表高度，然后除以 2，以获得在图表垂直居中时应该使用的偏移量。最后，我们立即将偏移值作为样式设置。这样就可以很容易地将图表放置于元素表面的中央。

Tags: