成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Js中 關(guān)于top、clientTop、scrollTop、offsetTop

xorpay / 1684人閱讀

摘要：由于為外層元素設(shè)置了，所以內(nèi)層元素會向上卷。和全面支持，而和不支持除外。認(rèn)為是網(wǎng)頁內(nèi)容高度，不過最小值是。認(rèn)為和都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于時，的值是，而可以小于。認(rèn)為是可視區(qū)域滾動條加邊框。

轉(zhuǎn)載自http://www.cnblogs.com/seven_...
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
網(wǎng)頁正文部分上： window.screenTop;
網(wǎng)頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度：window.screen.availWidth;

1、offsetLeft

假設(shè) obj 為某個 HTML 控件。

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。

例如：

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。

以上屬性在 FireFox 中也有效。

另外：我們這里所說的是指 HTML 控件的屬性值，并不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實際上大多數(shù)環(huán)境是由于對 document.body 解釋不同造成的，并不是由于對 offset 解釋不同造成的），點擊這里查看不同點。
標(biāo)題：offsetTop 與 style.top 的區(qū)別

預(yù)備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight

我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：

一、offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。

二、offsetTop 只讀，而 style.top 可讀寫。

三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。
標(biāo)題：clientHeight、offsetHeight和scrollHeight

我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這里說的是 document.body，如果是 HTML 控件，則又有不同，點擊這里查看。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

2、clientHeight

clientHeight

大家對 clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個工具條以下到狀態(tài)欄以上的這個區(qū)域，與頁面內(nèi)容無關(guān)。

offsetHeight

IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。

scrollHeight

IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。

簡單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。
NS、 FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實際高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。

但是
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同， xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。
標(biāo)題：scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft
scrollTop 是“卷”起來的高度值，示例：





如果為 p 設(shè)置了 scrollTop，這些內(nèi)容可能不會完全顯示。

由于為外層元素 p 設(shè)置了 scrollTop，所以內(nèi)層元素會向上卷。

scrollLeft 也是類似道理。

我們已經(jīng)知道 offsetHeight 是自身元素的寬度。

而 scrollHeight 是內(nèi)部元素的絕對寬度，包含內(nèi)部元素的隱藏的部分。

上述中 p 的 scrollHeight 為 300，而 p 的 offsetHeight 為 100。

scrollWidth 也是類似道理。

IE 和 FireFox 全面支持，而 Netscape 和 Opera 不支持 scrollTop、scrollLeft（document.body 除外）。
發(fā)表時間：2007-10-15 20:20:16
標(biāo)題：offsetTop、offsetLeft、offsetWidth、offsetHeight

4、clientLeft

返回對象的offsetLeft屬性值和到當(dāng)前窗口左邊的真實值之間的距離，可以理解為邊框的長度

一直以來對offsetLeft，offsetTop，scrollLeft，scrollTop這幾個方法很迷糊，花了一天的時間好好的學(xué)習(xí)了一下．得出了以下的結(jié)果：
1.offsetTop :
當(dāng)前對象到其上級層頂部的距離.
不能對其進(jìn)行賦值.設(shè)置對象到頁面頂部的距離請用style.top屬性.

2.offsetLeft :
當(dāng)前對象到其上級層左邊的距離.
不能對其進(jìn)行賦值.設(shè)置對象到頁面左部的距離請用style.left屬性.

3.offsetWidth :
當(dāng)前對象的寬度.
與style.width屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.offsetHeight :
與style.height屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值

5.offsetParent :
當(dāng)前對象的上級層對象.
注意.如果對象是包括在一個DIV中時,此DIV不會被當(dāng)做是此對象的上級層,(即對象的上級層會跳過DIV對象)上級層是Table時則不會有問題.
利用這個屬性，可以得到當(dāng)前對象在不同大小的頁面中的絕對位置．
得到絕對位置腳本代碼

function GetPosition(obj)
{
 var left = 0;
 var top   = 0;

 while(obj != document.body)
 {
       left = obj.offsetLeft;
        top   = obj.offsetTop;

        obj = obj.offsetParent;
 }

 alert("Left Is : " + left + "
" + "Top   Is : " + top);
}

6.scrollLeft :
對象的最左邊到對象在當(dāng)前窗口顯示的范圍內(nèi)的左邊的距離．
即是在出現(xiàn)了橫向滾動條的情況下，滾動條拉動的距離．

7.scrollTop
對象的最頂部到對象在當(dāng)前窗口顯示的范圍內(nèi)的頂邊的距離．
即是在出現(xiàn)了縱向滾動條的情況下，滾動條拉動的距離．

我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋，這里說的是 document.body，如果是 HTML 控件，則又有不同，點擊這里查看。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight

大家對 clientHeight 都沒有什么異議，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個工具條以下到狀態(tài)欄以上的這個區(qū)域，與頁面內(nèi)容無關(guān)。

offsetHeight

IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。

scrollHeight

IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。

簡單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。
NS、 FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實際高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。

說明
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 則意義又會不同，在 XHTML 中這三個值都是同一個值，都表示內(nèi)容的實際高度。新版本的瀏覽器大多支持根據(jù)頁面指定的 DOCTYPE 來啟用不同的解釋器。下載或瀏覽測試文件。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80754.html

相關(guān)文章

  • 容易混淆的client-*,scroll-*,offset-*

    摘要：容易混淆上來不說話，先拋出幾個問題是時候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...

    Jokcy 評論0 收藏0

  • 容易混淆的client-*,scroll-*,offset-*

    摘要：容易混淆上來不說話，先拋出幾個問題是時候談?wù)勊鼈冎g的區(qū)別了，是不是已經(jīng)混亂了好吧，一步一步來搞清楚這些東西是啥。要搞清這幾個容易混淆的概念，我的建議是運行文章中的例子。和類似于和，不同的是不包含邊框大小。 容易混淆client-*,scroll-*,offset-* Truth comes from practice 上來不說話，先拋出幾個問題： offsetWidth offs...

    tolerious 評論0 收藏0

  • [譯 + 補充]理解 DOM 座標(biāo)

    摘要：相對於座標(biāo)在可視區(qū)的最左上角?；笞鶚?biāo)通常透過事件取得。再次強調(diào)不幸的是沒有屬性可以直接取得元素對應(yīng)的座標(biāo)。觸發(fā)事件的元素相對於父容器定位元素的座標(biāo)，從開始計算。上個座標(biāo)與當(dāng)前的座標(biāo)移動距離。 座標(biāo)系統(tǒng) 在瀏覽器中有兩種座標(biāo)系統(tǒng) & 滑鼠座標(biāo)： 1. 相對於 `document` - 座標(biāo) (0, 0) 在整個頁面的最左上角。 2. 相對於 `window` - 座標(biāo) (0, 0) 在...

    Lionad-Morotar 評論0 收藏0

  • antd源碼解讀（6）- Affix

    摘要：這個組件是一個圖釘組件，使用的布局，讓組件固定在窗口的某一個位置上，并且可以在到達(dá)指定位置的時候才去固定。 Affix 這個組件是一個圖釘組件，使用的fixed布局，讓組件固定在窗口的某一個位置上，并且可以在到達(dá)指定位置的時候才去固定。 AffixProps 還是老樣子，看一個組件首先我們先來看看他可以傳入什么參數(shù) // Affix export interface Affix...

    coordinate35 評論0 收藏0

  • javascript基礎(chǔ)總結(jié)（三）——盒子模型

    摘要：中的盒子模型通過中提供一系列的方法和屬性獲取頁面中元素的樣式信息值系列內(nèi)容的寬高是給元素定義的這兩個樣式。 1、js中的盒子模型 通過js中提供一系列的方法和屬性獲取頁面中元素的樣式信息值； 2、client系列 內(nèi)容的寬高：是給元素定義的width/height這兩個樣式。如果沒有設(shè)置height值，容器的高度會根據(jù)里面內(nèi)容自己適應(yīng)，這樣獲取的值就是真實的內(nèi)容的高；如果設(shè)置固定的高...

    RayKr 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<