精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
頁面元素的定位:getBoundingClientRect()和document.documentElement.scrollTop
1.document.documentElement.getBoundingClientRect

MSDN對此的解釋是:

Syntax

oRect = object.getBoundingClientRect()

Return Value

Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.

Remarks

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

翻譯成中文是:該方法獲得頁面中某個元素的左,上,右和下分別相對瀏覽器視窗的位置。下面用圖說明下。 

該方法已經(jīng)不再只是適用IE了,F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法,可以說在獲得頁面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必須通過循環(huá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=utf-8" />
<title>Demo</title>
</head>

<body style="width:2000px; height:1000px;">
    
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo為了方便就直接用絕對定位的元素</div>
</body>
</html>
<script>
        document.getElementById(
'demo').onclick=function (){
        
if (document.documentElement.getBoundingClientRect) { 
            alert(
"left:"+this.getBoundingClientRect().left)
            alert(
"top:"+this.getBoundingClientRect().top)
            alert(
"right:"+this.getBoundingClientRect().right)
            alert(
"bottom:"+this.getBoundingClientRect().bottom)
            
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
            
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
            alert(
"Demo的位置是X:"+X+";Y:"+Y)
         } 
       }
</script>


 

有了這個方法,獲取頁面元素的位置就簡單多了,

 var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;


2.要獲取當(dāng)前頁面的滾動條縱坐標(biāo)位置,用:
document.documentElement.scrollTop
而不是
document.body.scrollTop
documentElement 對應(yīng)的是 html 標(biāo)簽,而 body 對應(yīng)的是 body 標(biāo)簽。
在標(biāo)準(zhǔn)w3c下,document.body.scrollTop恒為0,需要用document.documentElement.scrollTop來代替.
如果你想定位鼠標(biāo)相對于頁面的絕對位置時,你會發(fā)現(xiàn)google里面1000篇文章里面有999.99篇會讓你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop
,如果你發(fā)現(xiàn)你的鼠標(biāo)定位偏離了你的想象,請不要奇怪,這是再正常不過的事情。
ie5.5之后已經(jīng)不支持document.body.scrollX對象了。
所以在編程的時候,請加上這樣的判斷 
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top = document.body.scrollTop;
left = document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
}
文章來源:1.http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html
2.http://solodu.javaeye.com/blog/574912

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Live Messenger打造強大的免費在線客服【推薦】
WEB前端第三十二課——js事件處理-文檔、焦點
document.documentElement.scrollTop
documentElement和body的區(qū)別
div浮層,滾動條移動,保持位置不變
完美解決IE6不支持position:fixed的bug
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服

主站蜘蛛池模板: 连平县| 德令哈市| 黄平县| 崇义县| 金堂县| 太湖县| 鹤壁市| 广南县| 安乡县| 收藏| 六枝特区| 冀州市| 青铜峡市| 凤庆县| 澎湖县| 车险| 福建省| 普洱| 浪卡子县| 健康| 盐源县| 额敏县| 松原市| 宜州市| 弋阳县| 金乡县| 惠水县| 类乌齐县| 同仁县| 崇仁县| 灌南县| 浦北县| 汤阴县| 巫溪县| 介休市| 拜城县| 武穴市| 青海省| 淮安市| 呼伦贝尔市| 广元市|