DOM 中的 offset 屬性

與當前元素最近的經過定位(position 不等於 static)的父級元素，主要分為下列幾種情況：

元素自身有fixed定位，offsetparent的結果為null

當元素自身有fixed固定定位時，我們知道固定定位的元素相對於視口進行定位，此時沒有定位父級，offsetparent的結果為null

[注意]firefox 瀏覽器有相容性問題

id="test"

style="position:fixed">
div>
//firefox並沒有考慮固定定位的問題，返回，其他瀏覽器都返回null
console.log(test.offsetparent);
script>元素自身無fixed
定位，且父級元素都未經過定位，offsetparent的結果為id="test">
div>
console.log(test.offsetparent);//
script>元素自身無fixed定位，且父級元素存在經過定位的元素，offsetparent的結果為離自身元素最近的經過定位的父級元素

id="div0"
style="position:absolute;">
id="div1"
style="position:absolute;">
id='test'>
div>
div>
div>
console.log(test.offsetparent); //
script>元素的parentnode是null
console.log(document.body
.offsetparent);//null

offsettop表示元素的上外邊框至offsetparent元素的上內邊框之間的畫素距離

offsettop 和 style.top 的區別：

最大區別在於offsetleft可以返回沒有定位盒子的距離左側的位置。 而style.top不可以 只有定位的盒子 才有 left top right

offsettop返回的是數字，而style.top返回的是字串，除了數字外還帶有單位：px。

offsettop唯讀，而style.top可讀寫。

如果沒有給html元素指定過top樣式，則style.top返回的是空字串。

最重要的區別style.left只能得到 行內樣式offsetleft隨便

offsetwidth表示元素在水平方向上占用的空間大小，無單位(以畫素 px 計)

offsetwidth = border-left-width + padding-left + width + padding-right + border-right-width;

offsetheight = border-top-width + padding-top + height + padding-bottom + border-bottom-width;

如果給元素設定了 display:none，則它的偏移量屬性都為 0

每次訪問偏移量屬性都需要重新計算

offset的屬性的介紹

在獲取元素的高寬等屬性時,dom提供了這些api提供給我們下面進行介紹 只能檢視，無法修改，修改用 style.css 這是我建立的樣例，方便檢視 box box p 現在利用js語言對dom定義的offset進行測試 var obox document.queryselector box 藍色邊框...

DOM中關於屬性的基本操作

1 獲取屬性 11111 var odiv document.getelementbyid box odiv.id odiv.classname2 自定義屬性的一些操作 11111 var odiv document.getelementbyid box odiv.attributes 獲取所有的屬...

DOM常用的屬性

offsetheight height padding border，當前物件的高度 clientheight 獲取物件可視高度，不包括滾動條，不包括邊框 scrollheight 獲取物件的滾動高度 內容總高度 offsetwidth clientwidth scrollwidth offsett...