093_Element.getBoundingClientRect()方法和DOMRect对象
1. Element.getBoundingClientRect()
1.1. Element.getBoundingClientRect()方法返回值是一個(gè)DOMRect對象, 對象擁有l(wèi)eft, top, right, bottom, x, y, width和height這幾個(gè)以像素為單位的只讀屬性, 用于描述整個(gè)邊框。除了width和height以外的屬性是相對于視圖窗口的左上角來計(jì)算的。
2. DOMRect對象
2.1. 一個(gè)DOMRect代表一個(gè)矩形。DOMRect從其父類DOMRectReadOnly繼承屬性, 不同之處在于它們不再是只讀的。
2.2. DOMRectReadOnly.x, 返回DOMRect矩形原點(diǎn)的x坐標(biāo)。
2.3. DOMRectReadOnly.y, 返回DOMRect矩形原點(diǎn)的y坐標(biāo)。
2.4. DOMRectReadOnly.width, 返回DOMRect矩形的寬度。
2.5. DOMRectReadOnly.height, 返回DOMRect矩形的高度。
2.6. DOMRectReadOnly.top, 返回DOMRect的頂坐標(biāo)值(與y具有相同的值, 如果height為負(fù)值, 則為y + height的值)。
2.7. DOMRectReadOnly.right, 返回DOMRect的右坐標(biāo)值(與x + width具有相同的值, 如果width為負(fù)值, 則為x的值)。
2.8. DOMRectReadOnly.bottom, 返回DOMRect的底坐標(biāo)值(與y + height具有相同的值, 如果height為負(fù)值, 則為y的值)。
2.9. DOMRectReadOnly.left, 返回DOMRect的左坐標(biāo)值(與x具有相同的值, 如果width為負(fù)值, 則為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如果內(nèi)容被修剪, 則瀏覽器會顯示滾動(dòng)條以便查看其余的內(nèi)容。*/overflow: auto;/*nowrap并所有的空白符, 忽略換行符, 并且不允許自動(dòng)換行。*/white-space: nowrap; /*direction: rtl;*/}</style></head><body><div id="pDiv"><div id="myDiv"><h2>offsetWidth屬性</h2>1. offsetWidth屬性是一個(gè)只讀屬性, 它返回該元素的像素寬度, 寬度包含內(nèi)邊距(padding)、邊框(border)和元素的垂直滾動(dòng)條, 不包含外邊距(margin), 是一個(gè)整數(shù), 單位是像素px。<br />2. 語法: element.offsetWidth。<h2>offsetHeight屬性</h2>1. offsetHeight屬性是一個(gè)只讀屬性, 它返回該元素的像素高度, 高度包含內(nèi)邊距(padding)、邊框(border)和元素的水平滾動(dòng)條, 不包含外邊距(margin), 是一個(gè)整數(shù), 單位是像素px。<br />2. 語法: element.offsetHeight。<h2>offsetParent屬性</h2>1. offsetParent是一個(gè)只讀屬性, 獲得被定位的最近祖先元素。<br />2. 注意: offsetParent用于offsetLeft和offsetTop屬性。<br /> 3. 語法: element.offsetParent。 <h2>offsetLeft屬性</h2>1. offsetLeft是一個(gè)只讀屬性, 返回當(dāng)前元素相對于offsetParent節(jié)點(diǎn)左邊界的偏移像素值。<br />2. 元素向左偏移的像素值包含: 元素的外邊距(margin)和offsetParent元素的左側(cè)內(nèi)邊距(padding)。<br />3. 語法: element.offsetLeft。<h2>offsetTop屬性</h2>1. offsetLeft是一個(gè)只讀屬性, 返回當(dāng)前元素相對于offsetParent節(jié)點(diǎn)頂部邊界的偏移像素值。<br />2. 元素頂部偏移的像素值包含: 元素的外邊距(margin)和offsetParent元素的頂部內(nèi)邊距(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. 效果圖
總結(jié)
以上是生活随笔為你收集整理的093_Element.getBoundingClientRect()方法和DOMRect对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 105_键盘事件对象
- 下一篇： 055_Unicode字符官方标准六