常用元素位置與大小總結

偏移量

offsetparent是乙個唯讀屬性，返回乙個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則offsetparent為最近的table元素物件或根元素（標準模式下為html；怪異模式下為body）。當元素的style.display設定為none或定位為fixed時，offsetparent返回null

元素大小

滾動大小

// 不包含滾動條

// width
document.documentelement.clientwidth
// height
document.documentelement.clientheight
// 包含滾動條(ie9+, 不是css規範)
// width
window.innerwidth
// height
window.innerheight

// width

math.max(document.documentelement.scrollwidth, 
document.documentelement.clientwidth);
// height 
math.max(document.documentelement.scrollheight, 
document.documentelement.clientheight);
// 注：由於各瀏覽器在scrollwidth和clientwidth表現不一致， 
// 所以需要取得最大值來獲得準確的值；
// all
function getpagewh();
}

// top

el.scrolltop;
// left
el.scrollleft;
//文件滾動大小
// top
document.body.scrolltop
// left
document.body.scrollleft

// 當offsetparent為body時

// top
el.offsetheight;
// 當offsetparent不為body時，需要一層層迴圈至offsetparent為null(通用方法)
// top
function gettop(el)
return top;
}

// left

el.offsetleft;
// left 
function getleft(el)
return top;
}

// 元素距離視口頂部大小 = 元素距離文件頂部大小 - 文件正文垂直滾動高度；

function toptoviewport(el)

// 元素距離視口頂部大小 = 元素距離文件左側大小 - 文件正文水平滾動高度；

function lefttoviewport(el)

// 文件正文垂直滾動高度 < 可視區域範圍 < (瀏覽器可視區高度+文件正文垂直滾動高度)

function isonviewport(el)

function isbottom()

元素位置常用總結

用法簡單，返回元素對瀏覽器視口頂部和左邊部的距離 可為負數 以及寬高，單位px，為整數 獲取相對於頁面的位置需加上滾動條的距離 var rect el.getboundingclientrect 然後你就會發現現在不就是jq的 el offset 嗎？對的沒錯，就是這玩意。相容性 在ie7及以下，會...

css元素大小以及位置總結

如上圖所示是表示乙個元素的大小，content表示的是元素內容所佔的大小 margin的距離是指元素外邊框與父元素內邊框的距離 html元素的position屬性有四個屬性值，分別是static relative fixed absolute static relative fixed absolu...

JS獲取DOM元素位置與大小

每乙個html元素都有以下屬性 offsetwidth offsetheight offsetleft offsettop clientwidth clientheight scrollwidth scrollheight scrollleft scrolltop screenx screeny o...