screen對(duì)象
獲取屏幕的高寬（分辨率）
screen.width //屏幕的寬screen.height //屏幕的高screen.availWidth //屏幕可用寬度 屏幕的像素高度減去系統(tǒng)部件高度之后的值screen.availHeight //屏幕可用高度 屏幕的像素寬度減去系統(tǒng)部件寬度之后的值
window對(duì)象
獲得窗口位置及大小
window.screenTop //窗口頂部距屏幕頂部的距離window.screenLeft //窗口左側(cè)距屏幕左側(cè)的距離window.innerWidth //窗口中可視區(qū)域(viewpoint)的寬度 alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366window.innerHeight //窗口中可視區(qū)域(viewpoint)的高度 該值與瀏覽器是否顯示菜單欄等因素有關(guān) alert(window.innerHeight); //chrome 643 ff 657 ie 673window.outerWidth //瀏覽器窗口本身的寬度(可視區(qū)域?qū)挾?瀏覽器邊框?qū)挾? alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382 //說明chrome在最大化時(shí)瀏覽器窗口沒有邊框?qū)挾?非最大化時(shí)有8px邊框 //ff和ie上下左右有8px的邊框?qū)挾葁indow.outerHeight //瀏覽器窗口本身的高度 alert(window.outerHeight); //chrome 728 ff 744 ie 744
element對(duì)象
在介紹element對(duì)象各種高寬之前有必要解釋一下盒模型
默認(rèn)盒模型 box-sizing:content-box;
boxWidth = 2*margin + 2*border + 2*padding + widthboxHeight = 2*margin + 2*border + 2*padding + height
當(dāng)不出現(xiàn)滾動(dòng)條時(shí)
body{margin:0;}#demo{ width:100px; height:100px; padding:10px; border:20px; margin:30px; background-color:red;}<div id="demo">123456789 123456789</div>clientWidth:在頁面上返回內(nèi)容的可視寬度（不包括邊框，邊距或滾動(dòng)條）
clientHeight:在頁面上返回內(nèi)容的可視高度（不包括邊框，邊距或滾動(dòng)條）
clientWidth = 2*padding + width - scrollbarWidth console.log(document.getElementById('demo').clientWidth); //120 此時(shí)scrollbarWidth=0clientHeight = 2*padding + height - scrollbarHeight console.log(document.getElementById('demo').clientHeight); //120 此時(shí)scrollbarWidth=0offsetWidth:返回元素的寬度包括邊框和填充，但不包括邊距
offsetHeight:返回元素的高度包括邊框和填充，但不包括邊距
offsetWidth = 2*border + 2*padding + width console.log(document.getElementById('demo').offsetWidth) //160offsetHeight = 2*border + 2*padding + height console.log(document.getElementById('demo').offsetHeight) //160offsetLeft: 獲取對(duì)象相對(duì)于版面或由 offsetLeft屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop: 獲取對(duì)象相對(duì)于版面或由 offsetTop屬性指定的父坐標(biāo)的計(jì)算頂端位置
console.log(document.getElementById('demo').offsetLeft) //30console.log(document.getElementById('demo').offsetTop) //30
當(dāng)出現(xiàn)滾動(dòng)條時(shí)
body{ margin:0; padding:20px; width:1000px; height:500px;}<div id="demo">123456789123456789</div>scrollWidth: 返回元素的整個(gè)寬度（包括帶滾動(dòng)條的隱蔽的地方）
scrollHeight: 返回整個(gè)元素的高度（包括帶滾動(dòng)條的隱蔽的地方）
scrollWidth = 2*padding + width console.log(document.body.scrollWidth) //1040scrollHeight = 2*padding + width console.log(document.body.scrollHeight) //540
scrollTop: 向下滑動(dòng)滾動(dòng)塊時(shí)元素隱藏內(nèi)容的高度。不設(shè)置時(shí)默認(rèn)為0，其值隨著滾動(dòng)塊滾動(dòng)而變化
scrollLeft: 向右滑動(dòng)滾動(dòng)塊時(shí)元素隱藏內(nèi)容的寬度。不設(shè)置時(shí)默認(rèn)為0，其值隨著滾動(dòng)塊滾動(dòng)而變化
event對(duì)象
Event 對(duì)象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。
event.pageX:相對(duì)整個(gè)頁面的坐標(biāo)，以頁面的左上角為坐標(biāo)原點(diǎn)到鼠標(biāo)所在點(diǎn)的水平距離（IE8不支持）
event.pageY:相對(duì)整個(gè)頁面的坐標(biāo)，以頁面的左上角為坐標(biāo)原點(diǎn)到鼠標(biāo)所在點(diǎn)的垂直距離（IE8不支持）
event.clientX:相對(duì)可視區(qū)域的坐標(biāo)，以瀏覽器可視區(qū)域左上角為坐標(biāo)原點(diǎn)到鼠標(biāo)所在點(diǎn)的水平距離
event.clientY:相對(duì)可視區(qū)域的坐標(biāo)，以瀏覽器可視區(qū)域左上角為坐標(biāo)原點(diǎn)到鼠標(biāo)所在點(diǎn)的垂直距離
event.screenX:相對(duì)電腦屏幕的坐標(biāo)，以屏幕左上角為坐標(biāo)原點(diǎn)到鼠標(biāo)所在點(diǎn)的水平距離
event.screenY:相對(duì)電腦屏幕的坐標(biāo)，以屏幕左上角為坐標(biāo)原點(diǎn)到鼠標(biāo)所在點(diǎn)的垂直距離
event.offsetX:相對(duì)于自身的坐標(biāo)，以自身的padding左上角為坐標(biāo)原點(diǎn)到鼠標(biāo)所在點(diǎn)的水平距離
event.offsetY:相對(duì)于自身的坐標(biāo)，以自身的padding左上角為坐標(biāo)原點(diǎn)到鼠標(biāo)所在點(diǎn)的水平距離
總結(jié)
以上就是獲取JS中網(wǎng)頁各種高寬與位置的方法總結(jié)，對(duì)大家學(xué)習(xí)JS的時(shí)候提供了方便，有需要的小伙伴們可以參考學(xué)習(xí)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
