Vue螢幕自適應
javascript中製作滾動程式碼的常用屬性
頁可見區域寬: document.body.clientWidth;
網頁可見區域高: document.body.clientHeight; window.innerHeight;
網頁可見區域寬: document.body.offsetWidth (包括邊線的寬);
網頁可見區域高: document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬: document.body.scrollWidth;
網頁正文全文高: document.body.scrollHeight;
網頁被捲去的高: document.body.scrollTop;
網頁被捲去的左: document.body.scrollLeft;
網頁正文部分上: window.screenTop;
網頁正文部分左: window.screenLeft;
螢幕解析度的高: window.screen.height;
螢幕解析度的寬: window.screen.width;
螢幕可用工作區高度: window.screen.availHeight;
1、offsetLeft
假設 obj 為某個 HTML 控制元件。
obj.offsetTop 指 obj 距離上方或上層控制元件的位置,整型,單位畫素。
obj.offsetLeft 指 obj 距離左方或上層控制元件的位置,整型,單位畫素。
obj.offsetWidth 指 obj 控制元件自身的寬度,整型,單位畫素。
obj.offsetHeight 指 obj 控制元件自身的高度,整型,單位畫素。
我們對前面提到的“上方或上層”與“左方或上層”控制元件作個說明。
例如:
<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>
“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離,因為距其上邊最近的是 “tool” 層的上邊框。
“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離,因為距其上邊最近的是 “tool” 層的上邊框。
“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離,因為距其左邊最近的是 “tool” 層的左邊框。
“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離,因為距其左邊最近的是“提交”按鈕的右邊框。
以上屬性在 FireFox 中也有效。
另 外:我們這裡所說的是指 HTML 控制元件的屬性值,並不是 document.body,document.body 的值在不同瀏覽器中有不同解釋(實際上大多數環境是由於對 document.body 解釋不同造成的,並不是由於對 offset 解釋不同造成的)。
標題:offsetTop 與 style.top 的區別
我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置,style.top 也是可以的,二者的區別是:
一、offsetTop 返回的是數字,而 style.top 返回的是字串,除了數字外還帶有單位:px。
二、offsetTop 只讀,而 style.top 可讀寫。
三、如果沒有給 HTML 元素指定過 top 樣式,則 style.top 返回的是空字串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。
2、clientHeight
clientHeight
大家對 clientHeight 都沒有什麼異議,都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後一個工具條以下到狀態列以上的這個區域,與頁面內容無關。
offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度,可以小於 clientHeight。
scrollHeight
IE、Opera 認為 scrollHeight 是網頁內容實際高度,可以小於 clientHeight。
NS、FF 認為 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、 FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小於等於 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小於 clientHeight。
IE、Opera 認為 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
但是
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同, xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。
標題:scrollTop、scrollLeft、scrollWidth、scrollHeight
3、scrollLeft
scrollTop 是“卷”起來的高度值,示例:
<div style="width:100px;height:100px;overflow:hidden;" id="p">
<div style="width:50px;height:300px;" id="t">如果為 p 設定了 scrollTop,這些內容可能不會完全顯示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
由於為外層元素 p 設定了 scrollTop,所以內層元素會向上卷。
scrollLeft 也是類似道理。
我們已經知道 offsetHeight 是自身元素的寬度。
而 scrollHeight 是內部元素的絕對寬度,包含內部元素的隱藏的部分。
上述中 p 的 scrollHeight 為 300,而 p 的 offsetHeight 為 100。
scrollWidth 也是類似道理。
IE 和 FireFox 全面支援,而 Netscape 和 Opera 不支援 scrollTop、scrollLeft(document.body 除外)。
4、clientLeft
返回物件的offsetLeft屬性值和到當前視窗左邊的真實值之間的距離,可以理解為邊框的長度
一直以來對offsetLeft,offsetTop,scrollLeft,scrollTop這幾個方法很迷糊,花了一天的時間好好的學習了一下.得出了以下的結果:
結論:
1.offsetTop:
當前物件到其上級層頂部的距離.
不能對其進行賦值.設定物件到頁面頂部的距離請用style.top屬性.
2.offsetLeft :
當前物件到其上級層左邊的距離.
不能對其進行賦值.設定物件到頁面左部的距離請用style.left屬性.
3.offsetWidth :
當前物件的寬度.
與style.width屬性的區別在於:如物件的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中物件的寬度值而不是百分比值
4.offsetHeight :
與style.height屬性的區別在於:如物件的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中物件的高度值而不是百分比值
5.offsetParent :
當前物件的上級層物件.
注意.如果物件是包括在一個DIV中時,此DIV不會被當做是此物件的上級層,(即物件的上級層會跳過DIV物件)上級層是Table時則不會有問題.
利用這個屬性,可以得到當前物件在不同大小的頁面中的絕對位置.
6.scrollLeft :
物件的最左邊到物件在當前視窗顯示的範圍內的左邊的距離.
即是在出現了橫向滾動條的情況下,滾動條拉動的距離.
7.scrollTop
物件的最頂部到物件在當前視窗顯示的範圍內的頂邊的距離.
即是在出現了縱向滾動條的情況下,滾動條拉動的距離.
我們這裡說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋,這裡說的是 document.body,如果是 HTML 控制元件,則又有不同。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家對 clientHeight 都沒有什麼異議,都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後一個工具條以下到狀態列以上的這個區域,與頁面內容無關(即使內容只有一行)。
offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度,可以小於 clientHeight。
scrollHeight
IE、Opera 認為 scrollHeight 是網頁內容實際高度,可以小於 clientHeight。
NS、FF 認為 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、 FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小於等於 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小於 clientHeight。
IE、Opera 認為 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
window.innerHeight屬性和用法
innerHeight 和 innerWidth 都是window 的屬性,表示文件顯示區域的寬高,不包括工具欄等。
相容性:IE9+支援。
獲取方法
console.log(document.documentElement.clientHeight)
console.log(document.body.clientHeight)
兩者區別:
文件中沒有文件,那麼document.body.clientHeight=0
document.body.clientHeight 顯示的是文件中已有內容撐開的區域
window.innerHeight 和 ie的document.documentElement.clientHeight顯示的是文件的區域
就算裡面沒有內容,也是顯示出應有的數值
window.innerHeight與clientHeight的區別
①window.innerHeight屬於BOM(瀏覽器物件模型),而clientHeight屬於文件物件模型
②window.innerHeight獲取的高度包含橫向滾動條,而clientHeight不包含橫向滾動條
③所以,如果沒有橫向滾動條,兩者的值一致,有橫向滾動條後,clientHeight的值比innerHeight的值小,因為其不包含滾動條的高度。
④outerHeight是整個瀏覽器視窗的高度,下圖是outerHeight和innerHeight的區別。
⑤在有標籤頁功能的瀏覽器中,每個標籤都擁有自己的 window 物件;也就是說,同一個視窗的標籤頁之間不會共享一個 window 物件。有一些方法,如 window.resizeTo 和 window.resizeBy 之類的方法會作用於整個視窗而不是 window 物件所屬的那個標籤。一般而言,如果一樣東西無法恰當地作用於標籤,那麼它就會作用於視窗。