javascript中offset、client、scroll的屬性總結(jié)

更新時(shí)間：2015年08月13日 09:00:22 投稿：hebedich

這篇文章主要介紹了javascript中offset、client、scroll的屬性總結(jié)的相關(guān)資料,需要的朋友可以參考下

HTML元素有幾個(gè)offset、client、scroll開(kāi)頭的屬性，總是讓人摸不著頭腦。在書(shū)中看到記下來(lái)，分享給需要的小伙伴。主要是以下幾個(gè)屬性：

　　第一組：offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent

　第二組：clientWidth,clientHeight,clientLeft,clientTop

　　第三組：scrollWidth,scrollHeight,scrollLeft,scrollTop

　　詳細(xì)定義如下：

　　1.1 HTML元素的offsetWidth,offsetHeight以CSS像素返回它的屏幕尺寸，包含元素的邊框和內(nèi)邊距，不包含外邊距。

　　1.2 offsetLeft和offsetTop屬性返回元素的X和Y坐標(biāo)。通常，它們返回值即是文檔坐標(biāo)。但對(duì)于已定位元素的后代元素和一些其他元素（如表格單元），這些屬性返回的坐標(biāo)是相對(duì)于祖先元素的而非文檔。

　　1.3 offsetParent屬性指定offsetLeft,offsetTop相對(duì)的父元素。如果offsetParent為null，后兩者的返回值則為文檔坐標(biāo)。因此一般來(lái)說(shuō)，用offsetLeft和offsetTop來(lái)計(jì)算元素e的位置需要一個(gè)循環(huán)：

//計(jì)算元素的文檔坐標(biāo)
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} ;  
}

該方法計(jì)算的位置也不總是正確的，推薦使用內(nèi)置的getBoundingClientRect()方法。

　　2.1 clientWidth和clientHeight類(lèi)似于offsetWidth和offsetHeight屬性，不同的是它們不包含邊框大小，只包含內(nèi)容和內(nèi)邊距。同時(shí)，如果瀏覽器在內(nèi)邊距和邊框之間添加了滾動(dòng)條，clientWidth和clientHeight的返回值也不包含滾動(dòng)條。注意，對(duì)于類(lèi)型<i>,<code>和<span>這些內(nèi)聯(lián)元素，clientWidth和clientHeight總是返回0。

　　2.2 clientLeft和clientTop返回元素的內(nèi)邊距的外邊緣和它的邊框的外邊緣之間的水平距離和垂直距離，通常這些值就等于左邊和上邊的邊框?qū)挾取５侨绻赜袧L動(dòng)條，并且瀏覽器將這些滾動(dòng)條旋轉(zhuǎn)在左側(cè)或頂部，他們就還包含了滾動(dòng)條的寬度。對(duì)于內(nèi)聯(lián)元素，它們總是為0。通常clientLeft和clientTop用處不大。

　　3.1 scrollWidth和scollHeight是元素的內(nèi)容區(qū)域加上它的內(nèi)邊距再加上任何溢出內(nèi)容的尺寸。當(dāng)內(nèi)容正好和內(nèi)容區(qū)域匹配而沒(méi)有溢出時(shí)，這些屬性與clientWidth和clientHeight是相等的。但當(dāng)溢出時(shí)，它們就包含溢出的內(nèi)容，返回值比clientWidth和clientHeight要大。

　　3.2 scrollLeft和scrollTop指定元素的滾動(dòng)條的位置。注意，scrollLeft和scrollTop是可寫(xiě)的，通過(guò)設(shè)置它們來(lái)讓元素中的內(nèi)容滾動(dòng)(HTML元素并沒(méi)有類(lèi)似Window對(duì)象的scrollTo()方法)。

obj.offset[WidthHeightTopLeft] 　取控件相對(duì)于父控的位置
event.offset[XY] 取鼠標(biāo)相在觸發(fā)事件的控件中的坐標(biāo)
event.screen[XY] 鼠標(biāo)相對(duì)于屏幕坐標(biāo)
event.client[XY] 鼠標(biāo)相對(duì)于網(wǎng)頁(yè)坐標(biāo)在在
obj.scroll[WidthHeightTopLeft]　獲取對(duì)象滾動(dòng)的大小
obj.client[WidthHeightTopLeft]　獲取對(duì)象可見(jiàn)區(qū)域的大小

<!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>無(wú)標(biāo)題文檔</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 控件相對(duì)于父窗體的位置</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 鼠標(biāo)相對(duì)于控件的位置<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="鼠標(biāo)相對(duì)于屏幕坐標(biāo)<BR>event.screenX="+event.screenX+"<BR>";
ids.innerHTML+="event.screenY ="+event.screenY+"<BR>";
ids.innerHTML+="鼠標(biāo)相對(duì)于網(wǎng)頁(yè)坐標(biāo)event.clientX="+event.clientX+"<BR>";
ids.innerHTML+="event.clientY ="+event.clientY+"<BR>";
}
</script>
</body>
</html>

各瀏覽器都有這些屬性，有些值可能不一樣。

自己寫(xiě)代碼，對(duì)比一下結(jié)果，就明白了。

您可能感興趣的文章: