元素尺寸的獲取

scrollwidth、clientwidth、offsetwidth區別

scrollwidth是物件的實際內容的寬，不包邊線寬度，會隨物件中內容的多少改變（內容多了可能會改變物件的實際寬度）

clientwidth是物件可見的寬度，不包滾動條等邊線，會隨視窗的顯示大小改變

offsetwidth是物件的可見寬度，包滾動條等邊線，會隨視窗的顯示大小改變。

有三種方法能夠確定瀏覽器視窗的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對於internet explorer、chrome、firefox、opera 以及 safari：

視窗顯示區（可視區域）的寬度和高度，包括滾動條

window.innerheight -

ie不支援該屬性，ie中body元素的clientheight屬性與該屬性相同。window.innerwidth – ie不支援該屬性，ie中body元素的clientwidth屬性與該屬性相同。

對於 internet explorer 8、7、6、5：

視窗顯示區（可視區域）的寬度和高度，不包括滾動條區域

document.documentelement.clientheight

document.documentelement.clientwidth

document.body.clientheight

document.body.clientwidth

對於文件級非普通元素window,document的寬度獲取

$(window).width()  代表了當前瀏覽器可見區域的寬度

$(document).width() 則代表了整個文件的寬度,可以有滾動內容

而是採用window.document.documentelement.clientwidth（不包括滾動條區域）

document是反映了實際內容區間，那麼可以存在溢位滾動，所以就是

document.documentelement.scrollwidth

document.body.scrollwidth

神圖

js獲取各種寬度、高度的簡單介紹：

scrollheight: 獲取物件的滾動高度。 

scrollleft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 

scrolltop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 

scrollwidth:獲取物件的滾動寬度 

offsetheight:獲取物件相對於版面或由父座標 offsetparent 屬性指定的父座標的高度 

offsetleft:獲取物件相對於版面或由 offsetparent 屬性指定的父座標的計算左側位置 

offsettop:獲取物件相對於版面或由 offsettop 屬性指定的父座標的計算頂端位置 

event.clientx 相對文件的水平座標 

event.clienty 相對文件的垂直座標 

event.offsetx 相對容器的水平座標 

event.offsety 相對容器的垂直座標 

document.documentelement.scrolltop 垂直方向滾動的值 

event.clientx+document.documentelement.scrolltop 相對文件的水平座標+垂直方向滾動的量 

以上主要指ie之中，firefox差異如下：

ie6.0、ff1.06+：

clientwidth = width + padding 

clientheight = height + padding 

offsetwidth = width + padding + border 

offsetheight = height + padding + border

ie5.0/5.5：

clientwidth = width - border 

clientheight = height - border 

offsetwidth = width 

offsetheight = height

(需要提一下：css中的margin屬性，與clientwidth、offsetwidth、clientheight、offsetheight均無關)

offsetwidth (width+padding+border)

假設 obj 為某個 html 控制項。

obj.offsettop 指 obj 距離上方或上層控制項的位置，整型，單位畫素。

obj.offsetleft 指 obj 距離左方或上層控制項的位置，整型，單位畫素。

obj.offsetwidth 指 obj 控制項自身的寬度，整型，單位畫素。獲取物件可見內容的寬度，不包括滾動條，不包括邊框；

obj.offsetheight 指 obj 控制項自身的高度，整型，單位畫素。

offsetwidth 與 style.width 的區別

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

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

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

元素尺寸的獲取

scrollwidth clientwidth offsetwidth區別 scrollwidth是物件的實際內容的寬，不包邊線寬度，會隨物件中內容的多少改變 內容多了可能會改變物件的實際寬度 clientwidth是物件可見的寬度，不包滾動條等邊線，會隨視窗的顯示大小改變 offsetwidth是...

前端js 獲取元素位置 元素尺寸

獲得元素相對于父元素的座標top值 x yjs var y document.getelementbyid y console.log y.offsetleft 此時獲得值為y距離網頁左邊的距離,會隨著頁面大小而改變全頁面 半頁面 有定位是顯示的是距離前乙個有定位元素的距離 其中距離中不包含邊框 獲...

JS中獲取元素的尺寸及位置

js中獲取元素的尺寸及位置 1.clientwidth a 作用 獲取元素視覺化寬度 b 注意 clientwidth width padding 2.clientheight a 作用 獲取元素視覺化高度 3.offsetwidth a 作用 獲取元素寬度 b 注意 offsetwidth wid...