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对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 105_键盘事件对象
- 下一篇： 055_Unicode字符官方标准六