093_Element.getBoundingClientRect()方法和DOMRect对象

1. Element.getBoundingClientRect()

1.1. Element.getBoundingClientRect()方法返回值是一个DOMRect对象, 对象拥有left, top, right, bottom, x, y, width和height这几个以像素为单位的只读属性, 用于描述整个边框。除了width和height以外的属性是相对于视图窗口的左上角来计算的。

2. DOMRect对象

2.1. 一个DOMRect代表一个矩形。DOMRect从其父类DOMRectReadOnly继承属性, 不同之处在于它们不再是只读的。

2.2. DOMRectReadOnly.x, 返回DOMRect矩形原点的x坐标。

2.3. DOMRectReadOnly.y, 返回DOMRect矩形原点的y坐标。

2.4. DOMRectReadOnly.width, 返回DOMRect矩形的宽度。

2.5. DOMRectReadOnly.height, 返回DOMRect矩形的高度。

2.6. DOMRectReadOnly.top, 返回DOMRect的顶坐标值(与y具有相同的值, 如果height为负值, 则为y + height的值)。

2.7. DOMRectReadOnly.right, 返回DOMRect的右坐标值(与x + width具有相同的值, 如果width为负值, 则为x的值)。

2.8. DOMRectReadOnly.bottom, 返回DOMRect的底坐标值(与y + height具有相同的值, 如果height为负值, 则为y的值)。

2.9. DOMRectReadOnly.left, 返回DOMRect的左坐标值(与x具有相同的值, 如果width为负值, 则为x + width的值)。

3. 例子

3.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Element.getBoundingClientRect()方法和DOMRect对象</title><style type="text/css">* {margin: 0;padding: 0;}#pDiv {width: 400px;height: 400px;margin: 30px; border: solid 10px;/*position: relative;*//*padding: 10px;*/}#myDiv {width: 200px;height: 150px;margin-left: 30px;margin-top: 50px;border: solid 10px;padding: 30px;/*auto如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容。*/overflow: auto;/*nowrap并所有的空白符, 忽略换行符, 并且不允许自动换行。*/white-space: nowrap; /*direction: rtl;*/}</style></head><body><div id="pDiv"><div id="myDiv"><h2>offsetWidth属性</h2>1. offsetWidth属性是一个只读属性, 它返回该元素的像素宽度, 宽度包含内边距(padding)、边框(border)和元素的垂直滚动条, 不包含外边距(margin), 是一个整数, 单位是像素px。<br />2. 语法: element.offsetWidth。<h2>offsetHeight属性</h2>1. offsetHeight属性是一个只读属性, 它返回该元素的像素高度, 高度包含内边距(padding)、边框(border)和元素的水平滚动条, 不包含外边距(margin), 是一个整数, 单位是像素px。<br />2. 语法: element.offsetHeight。<h2>offsetParent属性</h2>1. offsetParent是一个只读属性, 获得被定位的最近祖先元素。<br />2. 注意: offsetParent用于offsetLeft和offsetTop属性。<br />    3. 语法: element.offsetParent。 <h2>offsetLeft属性</h2>1. offsetLeft是一个只读属性, 返回当前元素相对于offsetParent节点左边界的偏移像素值。<br />2. 元素向左偏移的像素值包含: 元素的外边距(margin)和offsetParent元素的左侧内边距(padding)。<br />3. 语法: element.offsetLeft。<h2>offsetTop属性</h2>1. offsetLeft是一个只读属性, 返回当前元素相对于offsetParent节点顶部边界的偏移像素值。<br />2. 元素顶部偏移的像素值包含: 元素的外边距(margin)和offsetParent元素的顶部内边距(padding)。<br />3. 语法: element.offsetTop。</div></div><script type="text/javascript">var d = document.querySelector("#myDiv");document.write("offsetWidth: " + d.offsetWidth + " offsetHeight: " + d.offsetHeight + " offsetLeft: " + d.offsetLeft + " offsetTop: " + d.offsetTop + "<br />");var rect = d.getBoundingClientRect();document.write("x: " + rect.x + "<br />");document.write("y: " + rect.y + "<br />");document.write("left: " + rect.left + "<br />");document.write("right: " + rect.right + "<br />");document.write("top: " + rect.top + "<br />");document.write("bottom: " + rect.bottom + "<br />");document.write("width: " + rect.width + "<br />");document.write("height: " + rect.height + "<br />");</script></body>
</html>

3.2. 效果图

093_Element.getBoundingClientRect()方法和DOMRect对象相关推荐

JS的map方法和Map对象
map方法 Array.prototype.map() 语法: array.map(function(item,index,arr), thisValue) item:数组每一项 (必须) index ...
java中RIGHT的值_java循环遍历， reduce()，reduceRight()方法和Object,keys遍历对象的属性...
最近几年,随着高新技术的不断出现,各种编程软件也开始进入到人们的视野当中.今天就来为大家说一下java编程语言的基础知识,也就是java循环遍历, reduce(),reduceRight()方法和O ...
在HashSet集合中添加三个Person对象，把姓名相同的人当作同一个人，禁止重复添加。提示：Person类中定义name和age属性，重写hashCode()方法和equals()方法，针对Pe
题目: 在HashSet集合中添加三个Person对象,把姓名相同的人当作同一个人,禁止重复添加. 提示:Person类中定义name和age属性,重写hashCode()方法和equals()方法, ...
JS中的call()方法和apply()方法用法总结
1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖 ...
python 推迟运行_一文看懂Python的time模块sleep()方法和strftime()方法
概述今天主要介绍一下Python的time sleep()方法和strftime()方法. 一.Python time sleep()方法 Python time sleep() 函数推迟调用线程的 ...
C#中的委托,匿名方法和Lambda表达式
简介在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Firs ...
Loader的load方法和loadBytes方法LoaderContext参数
(1)在看代码的时候还发现一个以前没有这么注意的问题,也mark一下. 关于Loader的load方法和loadBytes方法LoaderContext参数的问题.. 要加载某个SWF到自己的安全域内 ...
hashcode()方法和equals()方法
一.hashcode()方法和equals()方法的介绍 Java的基类Object提供了一些方法,其中equals()方法用于判断两个对象是否相等,hashCode()方法用于计算对象的哈希码.eq ...
并发基础篇（六）：线程Thread类的start()方法和run()方法
点个赞,看一看,好习惯!本文 GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了 3 个月总结的一线大厂 Java 面试总结,本 ...

093_Element.getBoundingClientRect()方法和DOMRect对象

093_Element.getBoundingClientRect()方法和DOMRect对象相关推荐

最新文章

热门文章