javascript中offset、client、scroll的屬性總結_javascript技巧
- WBOY原創
- 2016-05-16 15:45:261269瀏覽
HTML元素有幾個offset、client、scroll開頭的屬性，總是讓人摸不著頭腦。在書中看到記下來，分享給需要的小夥伴。主要是以下幾個屬性：
第一組：offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent
第二組：clientWidth,clientHeight,clientLeft,clientTop
第三組：scrollWidth,scrollHeight,scrollLeft,scrollTop
詳細定義如下：
1.1 HTML元素的offsetWidth,offsetHeight以CSS像素傳回它的螢幕尺寸，包含元素的邊框和內邊距，不包含外邊距。
1.2 offsetLeft和offsetTop屬性傳回元素的X和Y座標。通常，它們傳回值即是文檔座標。但對於已定位元素的後代元素和一些其他元素（如表格單元），這些屬性傳回的座標是相對於祖先元素的而非文件。
1.3 offsetParent屬性指定offsetLeft,offsetTop相對的父元素。如果offsetParent為null，後兩者的回傳值則為文檔座標。因此一般來說，用offsetLeft和offsetTop來計算元素e的位置需要一個循環：
//计算元素的文档坐标
function getElementPosition(e){
var x=0,y=0;
while(e !=null){
x +=e.offsetLeft;
y +=e.offsetTop;
e=e.offsetParent;
}
return {x:x, y:y} ;
}
此方法計算的位置也不總是正確的，建議使用內建的getBoundingClientRect()方法。
2.1 clientWidth和clientHeight類似offsetWidth和offsetHeight屬性，不同的是它們不包含邊框大小，只包含內容和內邊距。同時，如果瀏覽器在內邊距和邊框之間新增了捲軸，clientWidth和clientHeight的回傳值也不包含捲軸。注意，對於類型,和<span>這些內聯元素，clientWidth和clientHeight總是回傳0。 </span>
2.2 clientLeft和clientTop返回元素的內邊距的外邊緣和它的邊框的外邊緣之間的水平距離和垂直距離，通常這些值就等於左邊和上邊的邊框寬度。但是如果元素有滾動條，並且瀏覽器將這些滾動條旋轉在左側或頂部，他們就還包含了滾動條的寬度。對於內聯元素，它們總是為0。通常clientLeft和clientTop用處不大。
3.1 scrollWidth和scollHeight是元素的內容區域加上它的內邊距再加上任何溢出內容的尺寸。當內容正好和內容區域相符而沒有溢位時，這些屬性與clientWidth和clientHeight是相等的。但當溢出時，它們就包含溢出的內容，回傳值比clientWidth和clientHeight還要大。
3.2 scrollLeft和scrollTop指定元素的捲軸的位置。注意，scrollLeft和scrollTop是可寫的，透過設定它們來讓元素中的內容滾動(HTML元素並沒有類似Window物件的scrollTo()方法)。
obj.offset[WidthHeightTopLeft] 取控制相對於父控的位置
event.offset[XY] 取滑鼠相在觸發事件的控制項中的座標
event.screen[XY] 滑鼠相對於螢幕座標
event.client[XY] 滑鼠相對於網頁座標在在
obj.scroll[WidthHeightTopLeft] 取得物件滾動的大小
obj.client[WidthHeightTopLeft] 取得物件可見區域的大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div{
font-family: "宋体";
font-size: 12px;
color: #000000;
}
#div1{
position:absolute;
background-color:#f0f0f0;
width:200px;
height:200px;
left:20px;
top:0px;
z-index:1;
}
#div2{
background-color:#cfc0cf;
width:200px;
height:210px;
position:absolute;
left:261px;
top:347px;
z-index:100;
}
#div3{
background-color:#abbfbf;
width:200px;
height:200px;
position:absolute;
left:20px;
top:247px;
z-index:100;
}
#div4{
background-color:#cfcfcf;
width:200px;
height:200px;
position:absolute;
left:461px;
top:147px;
z-index:100;
}
-->
</style>
</head>
<body>
<div id='div1' >offset 控件相对于父窗体的位置</div>
<script>
function offset(ids){
ids.innerHTML="offsetLeft ="+ids.offsetLeft+"<BR>";
ids.innerHTML+="offsetWidth ="+ids.offsetWidth+"<BR>";
ids.innerHTML+="offsetHeight ="+ids.offsetHeight+"<BR>";
ids.innerHTML+="offsetTop ="+ids.offsetTop+"<BR>";
ids.innerHTML+="event.offset 鼠标相对于控件的位置<BR>";
ids.innerHTML+="offsetX ="+event.offsetX+"<BR>";
ids.innerHTML+="offsetY ="+event.offsetY+"<BR>";
}
function screen(ids){
ids.innerHTML="scrollWidth ="+ids.scrollWidth+"<BR>";
ids.innerHTML+="scrollHeight ="+ids.scrollHeight+"<BR>";
ids.innerHTML+="scrollTop ="+ids.scrollTop+"<BR>";
ids.innerHTML+="scrollLeft ="+ids.scrollLeft+"<BR>";
}
function client(ids){
ids.innerHTML="clientWidth ="+ids.clientWidth+"<BR>";
ids.innerHTML+="clientHeight ="+ids.clientHeight+"<BR>";
ids.innerHTML+="clientTop ="+ids.clientTop+"<BR>";
ids.innerHTML+="clientLeft ="+ids.clientLeft+"<BR>";
}
function eventc(ids){
ids.innerHTML="鼠标相对于屏幕坐标<BR>event.screenX="+event.screenX+"<BR>";
ids.innerHTML+="event.screenY ="+event.screenY+"<BR>";
ids.innerHTML+="鼠标相对于网页坐标event.clientX="+event.clientX+"<BR>";
ids.innerHTML+="event.clientY ="+event.clientY+"<BR>";
}
</script>
</body>
</html>
各瀏覽器都有這些屬性，有些數值可能不一樣。
自己寫程式碼，比較一下結果，就懂了。