DOM元素尺寸

2021-06-27 04:36:43 字數 1574 閱讀 7854

offsetleft 獲取的是相對于父物件的左邊距,相當於margin-left,從本元素的最外面border到父元素的最內border;

left 獲取或設定相對於 具有定位屬性(position定義為relative)的父物件 的左邊距

如果父div的position定義為relative,子div的position定義為absolute,那麼子div的style.left的值是相對于父div的值,

這同offsetleft是相同的,區別在於:

1. style.left 返回的是字串,如28px,offsetleft返回的是數值28,如果需要對取得的值進行計算,還用offsetleft比較方便。

2. style.left是讀寫的,offsetleft是唯讀的,所以要改變div的位置,只能修改style.left。

3. style.left的值需要事先定義,否則取到的值為空。而且必須要定義在html裡,我做過試驗,

如果定義在css裡,style.left的值仍然 為空,這就是我剛開始碰到的問題,總是取不到style.left的值。

offsetleft則仍然能夠取到,無需事先定義div的位置。

offsetwidth:dom元素自身的絕對寬度(如有滾動條橫向拉動的寬度),包括padding在內,

說白了就是border外邊框線以內的區域,和clientwidth不同的就是offsetwidth

包括了元素div的邊框,而clientwidth是不包括邊框在內的。

scrollheight:dom元素的實際高度,比如上面的例子:console.log(d2.scrollheight)值是多少呢?

740px;為什麼?因為d2包含了乙個d3,d3的實際高度是600px,d3的邊框是10px,d2的padding是60px,

這樣計算出來就是

d3.scrollheight= 600px+10px*2+60px*2;

那麼這個時候 console.log(d2.clientheight)是多少呢?按剛才上面說的計算應該是:

d2.clientheight=200px+60px*2=320px,但是實際上是303px,因為滾動條佔了17px,

而clientheight和clientwidth是

不包括滾動條在內的。

scrolltop,在上面的例子中加入了:

d2.οnscrοll=function()

當滾動條上下滾動時,在控制台顯示了滾動條的下拉了多少px;

DOM尺寸,DOM元素位置

dom尺寸 doctype html en utf 8 viewport content width device width,initial scale 1.0 document title utils.js script box style head box div 以乙個方向為例,每一種都有寬...

DOM元素尺寸和位置

offsetwidth和offsetheight 可以獲取元素實際大小 width padding border 可以獲取元素的大小,但是不能設定。box.offsetwidth box.offsetheight offsettop和offsetleft 可以獲取當前元素相對于父元素的位置。box....

22 DOM元素尺寸和位置

1.通過 style內聯獲取元素的大小var box document.getelementbyid box 獲取元素 box.style.width 200px 空 box.style.height 200px 空ps style 獲取只能獲取到行內 style 屬性的 css 樣式中的寬和高,如...