源碼源著微信
JS html的各種offerset scroll Top Width Height
轉(zhuǎn)
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對(duì)象的滾動(dòng)高度。
scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對(duì)象的滾動(dòng)寬度
offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop:獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置
event.clientX 相對(duì)文檔的水平座標(biāo)
event.clientY 相對(duì)文檔的垂直座標(biāo)
event.offsetX 相對(duì)容器的水平坐標(biāo)
event.offsetY 相對(duì)容器的垂直坐標(biāo)
document.documentElement.scrollTop 垂直方向滾動(dòng)的值
event.clientX+document.documentElement.scrollTop 相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量
這里是javascript中建造遷移轉(zhuǎn)變代碼的常用屬性
頁可見區(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)頁正文項(xiàng)目組上: window.screenTop;
網(wǎng)頁正文項(xiàng)目組左: window.screenLeft;
屏幕辨別率的高: window.screen.height;
屏幕辨別率的寬: window.screen.width;
屏幕可用工作區(qū)高度: window.screen.availHeight;
1、offsetLeft
假設(shè) obj 為某個(gè) HTML 控件。
obj.offsetTop 指 obj 間隔上方或上層控件的地位,整型,單位像素。
obj.offsetLeft 指 obj 間隔左方或上層控件的地位,整型,單位像素。
obj.offsetWidth 指 obj 控件自身的寬度,整型,單位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,單位像素。
我們對(duì)前面提到的“上方或上層”與“左方或上層”控件作個(gè)申明。
例如:
“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的間隔,因?yàn)榫嗥渖线叡葋淼氖?“tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的間隔,因?yàn)榫嗥渖线叡葋淼氖?“tool” 層的上邊框。
“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的間隔,因?yàn)榫嗥渥筮叡葋淼氖?“tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的間隔,因?yàn)榫嗥渥筮叡葋淼氖?ldquo;提交”按鈕的右邊框。
以上屬性在 FireFox 中也有效。
另 外:我們這里所說的是指 HTML 控件的屬性值,并不是 document.body,document.body 的值在不合瀏覽器中有不合申明(實(shí)際上大多半景象是因?yàn)閷?duì) document.body 申明不合造成的,并不是因?yàn)閷?duì) offset 申明不合造成的),點(diǎn)擊這里查看不合點(diǎn)。
題目:offsetTop 與 style.top 的差別
籌辦常識(shí):offsetTop、offsetLeft、offsetWidth、offsetHeight
我們知道 offsetTop 可以獲得 HTML 元素間隔上方或外層元素的地位,style.top 也是可以的,二者的差別是:
一、offsetTop 返回的是數(shù)字,而 style.top 返回的是字符串,除了數(shù)字外還帶有單位:px。
二、offsetTop 只讀,而 style.top 可讀寫。
三、若是沒有給 HTML 元素指定過 top 樣式,則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣事理。
題目:clientHeight、offsetHeight和scrollHeight
我們這里說說四種瀏覽器對(duì) document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明,這里說的是 document.body,若是是 HTML 控件,則又有不合,點(diǎn)擊這里查看。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
2、clientHeight
clientHeight
大師對(duì) clientHeight 都沒有什么貳言,都認(rèn)為是內(nèi)容可視區(qū)域的高度,也就是說頁面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度,一般是最后一個(gè)對(duì)象條以下到狀況欄以上的這個(gè)區(qū)域,與頁面內(nèi)容無關(guān)。
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 遷移轉(zhuǎn)變條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度,不過最小值是 clientHeight。
簡(jiǎn)單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
NS、 FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度,只不過當(dāng)網(wǎng)頁內(nèi)容高度小于便是 clientHeight 時(shí),scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 遷移轉(zhuǎn)變條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的申明與上方雷同,只是把高度換成寬度即可。
然則
FF 在不合的 DOCTYPE 中對(duì) clientHeight 的申明不合, xhtml 1 trasitional 中則不是如上申明的。其它瀏覽器則不存在此題目。
題目:scrollTop、scrollLeft、scrollWidth、scrollHeight
3、scrollLeft
scrollTop 是“卷”起來的高度值,示例:
因?yàn)闉橥鈱釉?p 設(shè)置了 scrollTop,所以內(nèi)層元素會(huì)向上卷。
scrollLeft 也是類似事理。
我們已經(jīng)知道 offsetHeight 是自身元素的寬度。
而 scrollHeight 是內(nèi)部元素的絕對(duì)寬度,包含內(nèi)部元素的隱蔽的項(xiàng)目組。
上述中 p 的 scrollHeight 為 300,而 p 的 offsetHeight 為 100。
scrollWidth 也是類似事理。
IE 和 FireFox 周全支撐,而 Netscape 和 Opera 不支撐 scrollTop、scrollLeft(document.body 除外)。
揭曉時(shí)候:2007-10-15 20:20:16
題目:offsetTop、offsetLeft、offsetWidth、offsetHeight
4、clientLeft
返回對(duì)象的offsetLeft屬性值和到當(dāng)前窗口左邊的真實(shí)值之間的間隔,可以懂得為邊框的長(zhǎng)度
一向以來對(duì)offsetLeft,offsetTop,scrollLeft,scrollTop這幾個(gè)辦法很含混,花了一天的時(shí)候好好的進(jìn)修了一下.得出了以下的成果:
1.offsetTop :
當(dāng)前對(duì)象到其上級(jí)層頂部的間隔.
不克不及對(duì)其進(jìn)行賦值.設(shè)置對(duì)象到頁面頂部的間隔請(qǐng)用style.top屬性.
2.offsetLeft :
當(dāng)前對(duì)象到其上級(jí)層左邊的間隔.
不克不及對(duì)其進(jìn)行賦值.設(shè)置對(duì)象到頁面左部的間隔請(qǐng)用style.left屬性.
3.offsetWidth :
當(dāng)前對(duì)象的寬度.
與style.width屬性的差別在于:如對(duì)象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不合頁面中對(duì)象的寬度值而不是百分比值
4.offsetHeight :
與style.height屬性的差別在于:如對(duì)象的寬度設(shè)定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不合頁面中對(duì)象的高度值而不是百分比值
5.offsetParent :
當(dāng)前對(duì)象的上級(jí)層對(duì)象.
重視.若是對(duì)象是包含在一個(gè)DIV中時(shí),此DIV不會(huì)被當(dāng)做是此對(duì)象的上級(jí)層,(即對(duì)象的上級(jí)層會(huì)跳過DIV對(duì)象)上級(jí)層是Table時(shí)則不會(huì)有題目.
哄騙這個(gè)屬性,可以獲得當(dāng)前對(duì)象在不合大小的頁面中的絕對(duì)地位.
獲得絕對(duì)地位腳本代碼
1function GetPosition(obj)
2{
3 var left = 0;
4 var top = 0;
5
6 while(obj != document.body)
7 {
8 left = obj.offsetLeft;
9 top = obj.offsetTop;
10
11 obj = obj.offsetParent;
12 }
13
14 alert("Left Is : " + left + "\r\n" + "Top Is : " + top);
15}
6.scrollLeft :
對(duì)象的最左邊到對(duì)象在當(dāng)前窗口顯示的局限內(nèi)的左邊的間隔.
便是在呈現(xiàn)了橫向遷移轉(zhuǎn)變條的景象下,遷移轉(zhuǎn)變條拉動(dòng)的間隔.
7.scrollTop
對(duì)象的最頂部到對(duì)象在當(dāng)前窗口顯示的局限內(nèi)的頂邊的間隔.
便是在呈現(xiàn)了縱向遷移轉(zhuǎn)變條的景象下,遷移轉(zhuǎn)變條拉動(dòng)的間隔.
我們這里說說四種瀏覽器對(duì) document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明,這里說的是 document.body,若是是 HTML 控件,則又有不合,點(diǎn)擊這里查看。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大師對(duì) clientHeight 都沒有什么貳言,都認(rèn)為是內(nèi)容可視區(qū)域的高度,也就是說頁面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度,一般是最后一個(gè)對(duì)象條以下到狀況欄以上的這個(gè)區(qū)域,與頁面內(nèi)容無關(guān)。
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 遷移轉(zhuǎn)變條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度,不過最小值是 clientHeight。
簡(jiǎn)單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
NS、 FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度,只不過當(dāng)網(wǎng)頁內(nèi)容高度小于便是 clientHeight 時(shí),scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 遷移轉(zhuǎn)變條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的申明與上方雷同,只是把高度換成寬度即可。
推薦文章
2025-01-18
2024-11-28
2024-11-09
2024-10-25
2024-06-25
2024-01-04
2023-11-06
2023-10-30
2023-10-13
2023-10-10
穩(wěn)定
產(chǎn)品高可用性高并發(fā)貼心
項(xiàng)目群及時(shí)溝通專業(yè)
產(chǎn)品經(jīng)理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽(yù)堅(jiān)持
10年專注高端品質(zhì)開發(fā)聯(lián)系我們
友情鏈接: