javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX

標籤：href   gravity   comm   ==   cli   設定   nav   sem   改變   

offsetWidth       //返回元素的寬度（包括元素寬度、內邊距和邊框，不包括外邊距）

offsetHeight      //返回元素的高度（包括元素高度、內邊距和邊框，不包括外邊距）

clientWidth        //返回元素的寬度（包括元素寬度、內邊距，不包括邊框和外邊距）

clientHeight       //返回元素的高度（包括元素高度、內邊距，不包括邊框和外邊距）

style.width         //返回元素的寬度（包括元素寬度，不包括內邊距、邊框和外邊距）

style.height       //返回元素的高度（包括元素高度，不包括內邊距、邊框和外邊距）

scrollWidth       //返回元素的寬度（包括元素寬度、內邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與clientWidth相同

scrollHeigh       //返回元素的高度（包括元素高度、內邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與clientHeight相同

注意：offsetWidth(offsetHeight)與style.width(style.height)的區別

1. style.height 返回的是字串，如28px，offsetWidth返回的是數值28，如果需要對取得的值進行計算，用offsetWidth比較方便;

如果拿到offsetWidth設定style.left的值，需加‘px‘。

2. style.width/style.height與scrollWidth/scrollHeight是可讀寫的屬性，

clientWidth/clientHeight與offsetWidth/offsetHeight是唯讀屬性

3. style.height的值需要事先定義，否則取到的值為空白。

而且必須要定義在html裡，如果定義在css裡，style.height的值仍然為空白，但元素位移有效；

而offsetWidth則仍能取到。

//-----------------------------------------------------------------------------------------------

當滑鼠事件發生時（不管是onclick，還是omousemove，onmouseover等）

clientX        滑鼠相對於瀏覽器（這裡說的是瀏覽器的有效地區）左上方x軸的位置；  不隨捲軸滾動而改變；

clientY        滑鼠相對於瀏覽器（這裡說的是瀏覽器的有效地區）左上方y軸的位置；  不隨捲軸滾動而改變；

pageX        滑鼠相對於瀏覽器（這裡說的是瀏覽器的有效地區）左上方x軸的位置；  隨捲軸滾動而改變；

pageY        滑鼠相對於瀏覽器（這裡說的是瀏覽器的有效地區）左上方y軸的位置；  隨捲軸滾動而改變；

screenX     滑鼠相對於顯示器螢幕左上方x軸的座標；  

screenY      滑鼠相對於顯示器螢幕左上方y軸的座標；  

offsetX        滑鼠相對於事件來源左上方X軸的座標

offsetY        滑鼠相對於事件來源左上方Y軸的座標

圖片引用來自lzding的部落格

    

javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX