092_元素的几种宽度和高度
1. offsetWidth屬性
1.1. offsetWidth屬性是一個只讀屬性, 它返回該元素的像素寬度, 寬度包含內邊距(padding)、邊框(border)和元素的垂直滾動條, 不包含外邊距(margin), 是一個整數, 單位是像素px。
1.2. 語法: element.offsetWidth。
2.?offsetHeight屬性
2.1. offsetHeight屬性是一個只讀屬性, 它返回該元素的像素高度, 高度包含內邊距(padding)、邊框(border)和元素的水平滾動條, 不包含外邊距(margin), 是一個整數, 單位是像素px。
2.2. 語法: element.offsetHeight。
3.?offsetParent屬性
3.1. offsetParent是一個只讀屬性, 獲得被定位的最近祖先元素。
3.2. 注意: offsetParent用于offsetLeft和offsetTop屬性。
3.3. 語法: element.offsetParent。
4. offsetLeft屬性
4.1. offsetLeft是一個只讀屬性, 返回當前元素相對于offsetParent節點左邊界的偏移像素值。
4.2. 元素向左偏移的像素值包含: 元素的外邊距(margin)和offsetParent元素的左側內邊距(padding)。
4.3. 語法: element.offsetLeft。
5. offsetTop屬性
5.1. offsetLeft是一個只讀屬性, 返回當前元素相對于offsetParent節點頂部邊界的偏移像素值。
5.2. 元素頂部偏移的像素值包含: 元素的外邊距(margin)和offsetParent元素的頂部內邊距(padding)。
5.3. 語法: element.offsetTop。
6. clientWidth屬性
6.1. clientWidth屬性是一個只讀屬性, 它返回該元素的像素寬度, 寬度包含內邊距(padding), 不包含邊框(border), 外邊距(margin)和垂直滾動條, 是一個整數, 單位是像素px。
6.2. 內聯元素以及沒有CSS樣式的元素的clientWidth屬性值為0。
6.3. 語法: element.clientWidth。
7. clientHeight屬性
7.1. clientHeight屬性是一個只讀屬性, 它返回該元素的像素高度, 高度包含內邊距(padding), 不包含邊框(border), 外邊距(margin)和水平滾動條, 是一個整數, 單位是像素px。
7.2. 語法: element.clientHeight。
8. clientLeft屬性
8.1. clientLeft屬性是一個只讀屬性, 表示一個元素的左邊框的寬度, 以像素表示。如果元素的文本方向是從右向左(RTL, right-to-left), 并且由于內容溢出導致左邊出現了一個垂直滾動條, 則該屬性包括滾動條的寬度。
8.2. 語法: element.clientLeft。
9. clientTop屬性
9.1. clientTop屬性是一個只讀屬性, 表示一個元素的頂部邊框的寬度, 以像素表示。
9.2. 語法: element.clientTop。
10. scrollHeight屬性
10.1. offsetHeight屬性是一個只讀屬性, 它返回該元素的像素高度, 高度包含內邊距(padding), 不包含外邊距(margin)、邊框(border), 是一個整數, 單位是像素px。
10.2. 語法: element.scrollHeight。
11. scrollWidth屬性
11.1. scrollWidth屬性是一個只讀屬性, 它返回該元素的像素寬度, 寬度包含內邊距(padding), 不包含外邊距(margin)、邊框(border), 是一個整數, 單位是像素px。
11.2. 語法: element.scrollWidth。
12. scrollLeft屬性
12.1. 返回當前視圖中的實際元素的左邊緣和左邊緣之間的距離。
12.2. 語法: element.scrollLeft。
13. scrollTop屬性
13.1. 返回當前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離。
13.2. 語法: element.scrollTop。
14. 例子
14.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>clientWidth-clientHeight-clientLeft-clientTop和offsetWidth-offsetHeight-offsetLeft-offsetTop和scrollWidth-scrollHeight-scrollLeft-scrollTop屬性</title><style type="text/css">* {margin: 0;padding: 0;}#pDiv {width: 400px;height: 400px;margin: 30px; border: solid 10px;/*padding: 10px;*//*position: relative;*/}#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">// Chrome滾動條的寬度是17var d = document.querySelector("#myDiv");document.write("clientWidth: " + d.clientWidth + " clientHeight: " + d.clientHeight + " clientLeft: " + d.clientLeft + " clientTop: " + d.clientTop + "<br />");document.write("offsetWidth: " + d.offsetWidth + " offsetHeight: " + d.offsetHeight + " offsetLeft: " + d.offsetLeft + " offsetTop: " + d.offsetTop + "<br />");d.scrollLeft += 30;d.scrollTop += 50;document.write("scrollWidth: " + d.scrollWidth + " scrollHeight: " + d.scrollHeight + " scrollLeft: " + d.scrollLeft + " scrollTop: " + d.scrollTop + "<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>14.2. 效果圖
總結
以上是生活随笔為你收集整理的092_元素的几种宽度和高度的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 052_CSS3 appearance属
- 下一篇： 100_框架对象事件