獲取JS中網(wǎng)頁各種高寬與位置的方法總結(jié)

更新時間：2016年07月27日 11:28:02 投稿：daisy

本文詳細(xì)羅列了如何在javascript獲取網(wǎng)頁各種高寬及位置，內(nèi)容比較全面，有需要的可以參考一下。

screen對象

獲取屏幕的高寬（分辨率）

screen.width     //屏幕的寬
screen.height    //屏幕的高
screen.availWidth  //屏幕可用寬度  屏幕的像素高度減去系統(tǒng)部件高度之后的值
screen.availHeight  //屏幕可用高度  屏幕的像素寬度減去系統(tǒng)部件寬度之后的值

window對象

獲得窗口位置及大小

window.screenTop   //窗口頂部距屏幕頂部的距離
window.screenLeft  //窗口左側(cè)距屏幕左側(cè)的距離
window.innerWidth  //窗口中可視區(qū)域(viewpoint)的寬度
  alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366
window.innerHeight  //窗口中可視區(qū)域(viewpoint)的高度 該值與瀏覽器是否顯示菜單欄等因素有關(guān)
  alert(window.innerHeight); //chrome 643 ff 657 ie 673
window.outerWidth  //瀏覽器窗口本身的寬度(可視區(qū)域?qū)挾?瀏覽器邊框?qū)挾?
  alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382 
  //說明chrome在最大化時瀏覽器窗口沒有邊框?qū)挾?非最大化時有8px邊框
  //ff和ie上下左右有8px的邊框?qū)挾?
window.outerHeight  //瀏覽器窗口本身的高度
  alert(window.outerHeight); //chrome 728 ff 744 ie 744

element對象

在介紹element對象各種高寬之前有必要解釋一下盒模型
默認(rèn)盒模型 box-sizing:content-box;

boxWidth = 2*margin + 2*border + 2*padding + width
boxHeight = 2*margin + 2*border + 2*padding + height

當(dāng)不出現(xiàn)滾動條時

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)容的可視寬度（不包括邊框，邊距或滾動條）

clientHeight:在頁面上返回內(nèi)容的可視高度（不包括邊框，邊距或滾動條）

clientWidth = 2*padding + width - scrollbarWidth   
console.log(document.getElementById('demo').clientWidth); //120 此時scrollbarWidth=0
clientHeight = 2*padding + height - scrollbarHeight 
console.log(document.getElementById('demo').clientHeight); //120 此時scrollbarWidth=0

offsetWidth:返回元素的寬度包括邊框和填充，但不包括邊距

offsetHeight:返回元素的高度包括邊框和填充，但不包括邊距

offsetWidth = 2*border + 2*padding + width 
console.log(document.getElementById('demo').offsetWidth)  //160
offsetHeight = 2*border + 2*padding + height 
console.log(document.getElementById('demo').offsetHeight)  //160

offsetLeft: 獲取對象相對于版面或由 offsetLeft屬性指定的父坐標(biāo)的計算左側(cè)位置
offsetTop: 獲取對象相對于版面或由 offsetTop屬性指定的父坐標(biāo)的計算頂端位置

console.log(document.getElementById('demo').offsetLeft)  //30
console.log(document.getElementById('demo').offsetTop)  //30

當(dāng)出現(xiàn)滾動條時

body{
  margin:0;
  padding:20px;
  width:1000px;
  height:500px;
}
<div id="demo">123456789123456789</div>

scrollWidth: 返回元素的整個寬度（包括帶滾動條的隱蔽的地方）

scrollHeight: 返回整個元素的高度（包括帶滾動條的隱蔽的地方）

scrollWidth = 2*padding + width  
console.log(document.body.scrollWidth)  //1040
scrollHeight = 2*padding + width  
console.log(document.body.scrollHeight)  //540

scrollTop: 向下滑動滾動塊時元素隱藏內(nèi)容的高度。不設(shè)置時默認(rèn)為0，其值隨著滾動塊滾動而變化

scrollLeft: 向右滑動滾動塊時元素隱藏內(nèi)容的寬度。不設(shè)置時默認(rèn)為0，其值隨著滾動塊滾動而變化

event對象

Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。

event.pageX:相對整個頁面的坐標(biāo)，以頁面的左上角為坐標(biāo)原點到鼠標(biāo)所在點的水平距離（IE8不支持）

event.pageY:相對整個頁面的坐標(biāo)，以頁面的左上角為坐標(biāo)原點到鼠標(biāo)所在點的垂直距離（IE8不支持）

event.clientX:相對可視區(qū)域的坐標(biāo)，以瀏覽器可視區(qū)域左上角為坐標(biāo)原點到鼠標(biāo)所在點的水平距離

event.clientY:相對可視區(qū)域的坐標(biāo)，以瀏覽器可視區(qū)域左上角為坐標(biāo)原點到鼠標(biāo)所在點的垂直距離

event.screenX:相對電腦屏幕的坐標(biāo)，以屏幕左上角為坐標(biāo)原點到鼠標(biāo)所在點的水平距離

event.screenY:相對電腦屏幕的坐標(biāo)，以屏幕左上角為坐標(biāo)原點到鼠標(biāo)所在點的垂直距離

event.offsetX:相對于自身的坐標(biāo)，以自身的padding左上角為坐標(biāo)原點到鼠標(biāo)所在點的水平距離

event.offsetY:相對于自身的坐標(biāo)，以自身的padding左上角為坐標(biāo)原點到鼠標(biāo)所在點的水平距離