From b3604b5033d845298ea5cccd8fc7983a3ffa5154 Mon Sep 17 00:00:00 2001 From: Irvin Date: Mon, 8 Nov 2021 23:08:06 +0800 Subject: mv .html to .md for api/element/getboundingclientrect --- .../api/element/getboundingclientrect/index.html | 97 ---------------------- .../web/api/element/getboundingclientrect/index.md | 97 ++++++++++++++++++++++ 2 files changed, 97 insertions(+), 97 deletions(-) delete mode 100644 files/zh-cn/web/api/element/getboundingclientrect/index.html create mode 100644 files/zh-cn/web/api/element/getboundingclientrect/index.md (limited to 'files/zh-cn') diff --git a/files/zh-cn/web/api/element/getboundingclientrect/index.html b/files/zh-cn/web/api/element/getboundingclientrect/index.html deleted file mode 100644 index 40d1d4488c..0000000000 --- a/files/zh-cn/web/api/element/getboundingclientrect/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Element.getBoundingClientRect() -slug: Web/API/Element/getBoundingClientRect -tags: - - API - - CSSOM View - - Method - - Refrence - - 方法 -translation_of: Web/API/Element/getBoundingClientRect ---- -
{{APIRef("DOM")}}
- -

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

- -

如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。

- -

语法

- -
rectObject = object.getBoundingClientRect();
-
- -

值

- -

返回值是一个 {{domxref("DOMRect")}} 对象，这个对象是由该元素的 {{domxref("Element.getClientRects", "getClientRects()")}} 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

- -

DOMRect 示例图空边框盒（译者注：没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 width、height 值为 0，left、top 值为第一个 CSS 盒子（按内容顺序）的 top-left 值。

- -

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值。

- -

跨浏览器兼容

- -

如果需要更好的跨浏览器兼容性，请使用 {{domxref("window.pageXOffset")}} 和 {{domxref("window.pageYOffset")}} 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码：

- -
// For scrollX
-(((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
-// For scrollY
-(((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
- -

示例

- -
// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象
-//译者注：DOMRect 是 TextRectangle 或 ClientRect 的标准名称，他们是相同的。
-var rect = obj.getBoundingClientRect();
-
- -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Initial definition
- -

备注

- -

该API返回的 DOMRect 对象在现代浏览器中可以被修改。而对于返回值为 DOMRectReadOnly 的旧版本，返回值并不能被修改。在IE和Edge浏览器中，无法向他们返回的 ClientRect 对象添加缺失的属性，对象可以防止 x 和 y 的回填。

- -

由于兼容性问题（见下文），尽量仅使用 left, top, right, 和 bottom.属性是最安全的。

- -

返回的 DOMRect对象中的属性不是自己的属性。 当使用in 和 for...in 运算符时能成功查找到返回的属性，但使用其他API（例如Object.keys（））查找时将失败。 而且，ES2015和更高版本的功能（如Object.assign（）和对象rest/spread）将无法复制返回的属性。

- -
rect = elt.getBoundingClientRect()
-// The result in emptyObj is {}
-emptyObj = Object.assign({}, rect)
-emptyObj = { ...rect }
-{width, ...emptyObj} = rect
-
- -

DOMRect 中的 top, left, right, bottom 属性是使用对象的其他属性的值来计算获得的。

- -

浏览器兼容性

- - - -
{{Compat("api.Element.getBoundingClientRect")}}
- -

参考资料

- - diff --git a/files/zh-cn/web/api/element/getboundingclientrect/index.md b/files/zh-cn/web/api/element/getboundingclientrect/index.md new file mode 100644 index 0000000000..40d1d4488c --- /dev/null +++ b/files/zh-cn/web/api/element/getboundingclientrect/index.md @@ -0,0 +1,97 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - CSSOM View + - Method + - Refrence + - 方法 +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

+ +

如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。

+ +

语法

+ +
rectObject = object.getBoundingClientRect();
+
+ +

值

+ +

返回值是一个 {{domxref("DOMRect")}} 对象，这个对象是由该元素的 {{domxref("Element.getClientRects", "getClientRects()")}} 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

+ +

DOMRect 示例图空边框盒（译者注：没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 width、height 值为 0，left、top 值为第一个 CSS 盒子（按内容顺序）的 top-left 值。

+ +

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值。

+ +

跨浏览器兼容

+ +

如果需要更好的跨浏览器兼容性，请使用 {{domxref("window.pageXOffset")}} 和 {{domxref("window.pageYOffset")}} 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码：

+ +
// For scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// For scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+ +

示例

+ +
// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象
+//译者注：DOMRect 是 TextRectangle 或 ClientRect 的标准名称，他们是相同的。
+var rect = obj.getBoundingClientRect();
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Initial definition
+ +

备注

+ +

该API返回的 DOMRect 对象在现代浏览器中可以被修改。而对于返回值为 DOMRectReadOnly 的旧版本，返回值并不能被修改。在IE和Edge浏览器中，无法向他们返回的 ClientRect 对象添加缺失的属性，对象可以防止 x 和 y 的回填。

+ +

由于兼容性问题（见下文），尽量仅使用 left, top, right, 和 bottom.属性是最安全的。

+ +

返回的 DOMRect对象中的属性不是自己的属性。 当使用in 和 for...in 运算符时能成功查找到返回的属性，但使用其他API（例如Object.keys（））查找时将失败。 而且，ES2015和更高版本的功能（如Object.assign（）和对象rest/spread）将无法复制返回的属性。

+ +
rect = elt.getBoundingClientRect()
+// The result in emptyObj is {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+
+ +

DOMRect 中的 top, left, right, bottom 属性是使用对象的其他属性的值来计算获得的。

+ +

浏览器兼容性

+ + + +
{{Compat("api.Element.getBoundingClientRect")}}
+ +

参考资料

+ + -- cgit v1.2.3-54-g00ecf