快捷導(dǎo)航

js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹

更新時(shí)間：2012年05月16日 14:21:50 作者：

js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹，需要的朋友可以看看

 
<!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=utf-8" /> 
<title>js位子表示</title> 
<script type="text/javascript"> 
function testClick(oDiv){ 
var oDivId=document.getElementById(oDiv); 
alert("offsetHeight:"+oDivId.offsetHeight+"\n offsetWidth:"+oDivId.offsetWidth+"\n offsetLeft:"+oDivId.offsetLeft+"\n offsetRight:"+oDivId.offsetLeft+"\n offsetTop:"+oDivId.offsetTop 
+"\n offsetParent:"+oDivId.offsetParent +"\n scrollHeight:"+oDivId.scrollHeight+"\n scrollWidth:"+oDivId.scrollWidth+"\n scrollTop:"+oDivId.scrollTop+"\n scrollLeft:"+oDivId.scrollLeft+"\n " ); 
} 
</script> 
</head> 
<body style="margin:0; padding:0;"> 
<div style="width:300px; height:300px; padding:2px; margin:3px;"> 
<div id="t1" style="margin:1px; padding:4px ; border:3px solid #eeeeee; width:100px; height:200px; overflow:scroll; cursor:pointer;" onclick="testClick('t1')" > 
一般的通過(guò)mousedown、mousemove、mouseup等打造的拖動(dòng)，僅僅在普通的鍵盤(pán)+鼠標(biāo)的電腦設(shè)備上可以工作。而到了ios設(shè)備上（iphone itouch ipad），則不能工作了。最近因?yàn)樽鰝€(gè)東西，需要支持ios設(shè)備，所以只好看了下webkit瀏覽器的觸摸事件。 
其實(shí)也很簡(jiǎn)單，對(duì)應(yīng)mousedown、mousemove、mouseup的觸摸事件分別是touchstart、touchmove、touchend。為了寫(xiě)個(gè)demo，花了不少的時(shí)間，所以為了節(jié)省時(shí)間，我文章里就不多說(shuō)了，僅貼一下相關(guān)代碼。 
</div> 
</div> 
</body> 
</html> 

ie(ie9,chrome,ff基本一致)中：
offsetHeight(返回元素的高度和寬度，以像素為單位,包含內(nèi)邊距)：
200+4+4+3+3=214（自身200的高度+上下各為4的內(nèi)邊距+上下的各為3的border，注意不包括外邊距）
offsetWidth(返回元素的高度和寬度，以像素為單位,包含內(nèi)邊距)：、
100+3+3+4+4=114 同上
offsetLeft（返回當(dāng)前元素的左邊界到它的包含元素的左邊界的偏移量，以像素為單位）:
2+3+1=6（ie6下為3）（父級(jí)div的內(nèi)左邊距2+父級(jí)div外左邊距+3+子div左外邊距+1，注意這里子div內(nèi)邊距是不會(huì)影響到offsetLeft）
沒(méi)有offsetRight的概念。
offsetTop（返回當(dāng)前元素的上邊界到它的包含元素的上邊界的偏移量，以像素為單位。）
2+3+1=6(ie6下為2)道理和offsetLeft一樣
scrollHeight(返回元素的完整的高度和寬度，以像素為單位。當(dāng)一個(gè)元素?fù)碛袧L動(dòng)條時(shí)（比如由于 CSS 的 overflow:scroll 屬性,如果為hidden，得到的只是能顯示文字所能看到的高度)
474（div的實(shí)際的高度，由里面的文字來(lái)決定,overflow:scroll ）
如果overflow：hidden，就只有390，其它的被隱藏了
如果去調(diào)overflow,就是390，為什么 overflow:scroll 卻等于474呢？因?yàn)檫€包含了滾動(dòng)條的高度
scrollWidth：（和scrollheight道理一樣)
overflow:hidden值為108(子div實(shí)際的寬度）
overflow:scroll 值為90（這里為什么會(huì)這樣？難道不包括滾動(dòng)條的寬度？）
去掉overflow，值為108
scrolltop(返回已經(jīng)滾動(dòng)到元素的左邊界或上邊界的像素?cái)?shù)。只有在元素有滾動(dòng)條的時(shí)候，例如，元素的 CSS overflow 屬性設(shè)置為 auto 的時(shí)候，這些像素才有用。這些屬性也只在文檔的 <body> 或 <html> 標(biāo)記上定義（這和瀏覽器有關(guān)），并且一起來(lái)制定滾動(dòng)文檔的位置。注意，這些屬性并不會(huì)指定一個(gè) <iframe> 標(biāo)記的滾動(dòng)量)
如果不拖動(dòng)滾動(dòng)條，默認(rèn)的值為0；
scrollLeft同上

您可能感興趣的文章: