第一部分 JavaScript中的寬高屬性
一、與window相關的寬高屬性
1.1 window.location和document.location
window
對象的location
屬性引用的是location
對象,表示該窗口中當前顯示文檔的URL
document
的對象的location
屬性也是引用location
對象- 所以
window.location === document.location
//true
1.2 window.screen
window.screen
包含有關用戶屏幕的信息。它包括:window.screen.width
window.screen.height
window.screen.availHeight
window.screen.availWidth
window.screenTop
window.screenLeft
1.3 與window相關的寬高
window.innerWidth
內部的寬度window.innerHeight
內部的高度window.outWidth
外部的寬度window.outHeight
外部的高度
二、與document相關的寬高屬性
2.1與client相關的寬高
document.body.clientWidth
元素寬度(可視內容區+內邊距)document.body.clientHeight
元素高度(可視內容區+內邊距)-
該屬性指的是元素的可視部分寬度和高度,即
padding+content
如果沒有滾動條,即爲元素設定的寬度和高度
如果出現滾動條,滾動條會遮蓋元素的寬高,那麼該屬性就是其本來寬高減去滾動條的寬高example1:
1 2 3 4 5 6 7 8 9 10 11
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log(document.body.clientWidth); // 350+padding(80) = 430 console.log(document.body.clientHeight); // 500 + padding(80) = 580
example2: 在div中添加文字, 指導出現滾動條
1 2 3 4 5 6 7 8 9 10 11 12
#exp2 { width:200px; height:200px; background:red; border:1px solid #000; overflow:auto; } var test = document.getElementById("exp2"); console,log(test.clientHeight); // 200 console.log(test.clientWidth); //
-
小結clientWidth和clientHeight
- 無
padding
無滾動 :clientWidth
= 盒子的width
- 有
padding
無滾動 :clientWidth
= 盒子的width
+ 盒子的padding * 2
- 有
padding
有滾動 :clientWidth
= 盒子和width
+ 盒子的padding * 2
- 滾動軸寬度
- 無
document.body.clientLeft
document.body.clientTop
-
這兩個返回的是元素周圍邊框的厚度,如果不指定一個邊框或者不定位該元素,它的值就是0
例:
1 2 3 4 5 6 7 8 9 10 11
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log(document.body.clientLeft); // 20 console.log(document.body.clientTop); // 20
小結clientLeft和clientTop
- 這一對屬性是用來讀取元素的
border
的寬度和高度的clientTop = border-top
clientLeft = border-left
-
2.2 與offset相關的寬高
- document.body.offsetWidth(元素的border+padding+content的寬度)
- document.body.offsetHeight(元素的border+padding+content的高度)
-
該屬性和其內部的內容是否超出元素大小無關,只和本來設定的border以及width和height有關
例:
1 2 3 4 5 6 7 8 9 10 11
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } console.log(document.body.offsetWidth); // 470 = padding*2 + 350 + border*2 console.log(document.body.offsetHeight); // 620 = padding*2 + 500 + border*2
小結offsetWidth和offsetHeight
- 無
padding
無滾動無border
- offsetWidth = clientWidth = 盒子的寬度
- 有
padding
無滾動有border
- offsetWidth = 盒子的寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 邊框寬度*2
- 有
padding
有滾動,且滾動是顯示的,有border
- offsetWidth = 盒子寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 滾動軸寬度 + 邊框寬度*2
- document.offsetLeft
- document.offsetTop
-
瞭解這兩個屬性我們必須先了解它,什麼是
offsetParent
- 如果當前元素的父級元素沒有進行
CSS
定位(position
爲absolute
或relative
),offsetParent
爲body.
- 假如當前元素的父級元素中有
CSS
定位,offsetParent
取最近的那個父級元素 -
offsetLeft的兼容性問題:
-
在
IE6/7
中offsetLeft
= offsetParent的padding-left + 當前元素的margin-left
-
在
IE8/9/10
以及chrome
中offsetLeft
= offsetParent的margin-left + offsetParent的border寬度 + offsetParent的padding-left + 當前元素的margin-left
-
在
FireFox
中offsetLeft
= offsetParent的margin-left + 當前元素的margin-left + offsetParent的padding-left
-
例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } #exp { width:400px; height:200px; padding:20px; margin:10px; background:red; border:20px solid #000; overflow:auto; } var div = document.getElementById("exp");
-
在IE8/9/10以及chrome中:
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
- div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
-
在FireFox:(相比chrome中少了border)
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 = 60
- div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 = 60
-
在IE6/7中:(相比在FireFox,不但少了border還少了父級元素的margin)
div.offsetLeft
= 本身的margin10
+ 父級元素的padding40
= 50div.offsetTop
= 本身的margin10
+ 父級元素的padding40
= 50
-
2.3與scroll相關的寬高 (實際項目中用的最多)
- document.body.scrollWidth
- document.body.scrollHeight
-
document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區別的
例:
1 2 3 4 5 6 7 8 9 10 11 12
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } document.body.scrollHeight; // document.body.scrollWidth; //
-
當給定寬高小於瀏覽器窗口的寬高
- scrollWidth = 通常是瀏覽器窗口的寬度
- scrollHeight = 通常是瀏覽器窗口的高度
-
當給定寬高大於瀏覽器窗口的寬高,且內容小於給定寬高的時候
- scrollWidth = 給定寬度 + 其所有的padding + margin + border
- scrollHeight = 給定高度 + 其所有的padding + margin + border
-
當給定寬高大於瀏覽器窗口寬高,且內容大於給定寬高
- scrollWidth = 內容寬度 + 其所有的padding + margin + border
- scrollHeight = 內容高度 + 其所有的padding + margin + border
-
在某div中的scrollWidth和scrollHeight
- 無滾動軸時:
- scrollWidth = clientWidth = 盒子寬度 + 盒子padding*2
- 有滾動軸時:
- scrollWidth = 實際內容的寬度 + padding*2
- scrollHeight = 實際內容的高度 + padding*2
- document.body.scrollLeft
- document.body.scrollTop
-
與前面不同的是,這對屬性是可讀寫的,指的是當元素其中的超出其寬高的時候,元素被捲起來的高度和寬度
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
#exp { width:400px; height:200px; padding:20px; margin:10px; background:red; border:20px solid #000; overflow-y:scroll; } var mydiv = document.getElementById("exp"); mydiv.scrollTop ; //默認情況下是0 mydiv.scrollLeft ; //默認情況下是0 //可以改寫它 mydiv.scrollTop = 20; console.log(mydiv.scrollTop)
obj.style.width和obj.style.height
對於一個
DOM
元素,它的style
屬性返回的是一個對象,這個對象的任意一個屬性是可讀寫的,style.width
等於css
屬性中的寬度。style.height
等於css
屬性中的高度2.4 documentElement和body的關係
是父子級的關係
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll; } #exp { width:400px; height:200px; padding:20px; margin:10px; background:red; border:20px solid #000; overflow-y:scroll; } console.log(document); //document console.log(document.documentElement); //html console.log(document.body); //body
- 兼容問題推薦使用 獲取瀏覽器窗口可視區域大小
-
1 2
document.body.clientWidth || document.documentElement.clientWidth; document.body.clientHeight || document.documentElement.clientHeight;
三、Event對象的5種座標
例:
1 2
<div id="example" style="width: 200px;height: 200px;background: red;margin: 100px auto;"></div>
1 2 3 4 5 6 7 8
var example = document.getElementById("example"); example.onclick = function(e){ console.log("clientX "+e.clientX + " : " + " clientY "+e.clientY); console.log("screenX "+e.screenX + " : " + " screenY "+e.screenY); console.log("offsetX "+e.offsetX + " : " + " offsetY "+e.offsetY); console.log("pageX "+e.pageX + " : " + " pageY "+e.pageY); console.log("x "+e.x + " : " + " y "+e.y); }
四、 js各種寬高的應用
- example1:可視區域加載
-
1
<div id="example1" ></div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
#example1 { width: 500px; height: 350px; background: red; margin: 1000px auto 0 auto; } @-webkit-keyframes fadeInLeft{ 0%{ opacity: 0; transform: translate3d(-100%,0,0); } 100%{ opacity: 1; transform: none; } } .fadeInLeft { animation-name: fadeInLeft; animation-duration: 2s; }
1 2 3 4 5 6 7 8 9 10 11 12
function showDiv(){ var example = document.getElementById("example"); var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度 var divTop = example.getBoundingClientRect().top; if(divTop <= clients){ example.classList.add("fadeInLeft"); // 這裏可以通過setAttribute設置圖片的src按需加載 } document.title = clients+"---"+divTop; } window.onscroll = showDiv;
- example2:網頁滾動到頂部或者底部
-
1
<div id="example2" ></div>
1 2 3 4 5 6
#example2 { width: 500px; height: 350px; background: red; margin: 1000px auto 0 auto; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
function scrollTopOrBottom(){ var example2 = document.getElementById("example"); var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度,兼容性寫法 var scrollTop = document.body.scrollTop; var wholeHeight = document.body.scrollHeight; if(clients + scrollTop >= wholeHeight){ alert("我已經到了底部!"); // 這裏可以調用Ajax分頁加載到頁面中,實現多頁加載功能 }else if(scrollTop == 0){ alert("我已經到了頂部了!"); } document.title = (clients + scrollTop)+"---"+wholeHeight+"--"+scrollTop; } window.onscroll = scrollTopOrBottom;
- example3:DIV滾動到底部加載
-
1 2 3 4 5 6 7 8
<div id="example3" > DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載 DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載 DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載 DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載 DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載 DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載 </div>
1 2 3 4 5 6 7 8
#example3 { width: 500px; height: 400px; background: red; margin: 10px auto; padding: 10px; overflow-y: scroll; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
var div = document.getElementById("example3"); function divScroll(){ var wholeHeight = div.scrollHeight;//滾動區域高度 var divScrollTop = div.scrollTop;//捲上去的那部分高度 var divHeight = div.clientHeight; //div的可視區域的高度 if(divScrollTop + divHeight >= wholeHeight){ alert("我已經到了底部!"); // 這裏可以在div中通過滾動加載分頁按需顯示 }else if(divScrollTop == 0){ alert("我已經到了頂部了!"); } document.title = (divScrollTop + divHeight)+"---"+wholeHeight+"--"+divScrollTop; } div.onscroll = divScroll;
- example4:計算滾動軸的寬度
-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
//獲取滾動軸的寬度 function getScrollBar(){ var el = document.createElement("p"); var styles = { width:"100px", height:"100px", overflowY:"scroll" }; for (var prop in styles){ el.style[prop] = styles[prop];//把 styles上的屬性全部遍歷拷貝到el.style上 } document.body.appendChild(el); var scrollBarWidth = el.offsetWidth - el.clientWidth; el.remove(); return scrollBarWidth; } alert(getScrollBar());//17
五、js中的寬高屬性總結