一.js獲取頁面各種距離
1.screen系列
-
screen.width:屏幕的寬度 -
screen.height:屏幕的高度
2.style系列（必須是行內(nèi)設(shè)置樣式才有效）
-
element.style.width：當前對象的寬度朱浴。 -
element.style.height：當前對象的高度。 -
element.style.left：當前對象的left值舍悯。 -
element.style.top：當前對象的top值裆蒸。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%; margin:0; padding:0;}
.wrap{height: 1900px;background: #000;}
</style>
</head>
<body>
<!--設(shè)置百分百寬度-->
<div class="wrap" id="wrap" style="width: 80%"></div>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById("wrap");
var styleW=wrap.style.width;
var styleH=wrap.style.height;
var oW=wrap.offsetWidth;
console.log(styleW);//返回80%
console.log(styleH);//沒有在行內(nèi)樣式設(shè)置亿鲜，無效核蘸，返回空值
console.log(oW);//返回的是數(shù)字
}
</script>
</body>
</html>
3.offset系列
-
element.offsetParent：當前對象的上級層對象叔收。 -
element.offsetWidth：當前對象的寬度撤奸。（width+padding+border） -
element.offsetHeight：當前對象的高度吠昭。（Height+padding+border） -
element.offsetLeft：當前對象到其上級層左邊的距離 。 -
element.offsetTop：當前對象到其上級層上邊的距離 胧瓜。 -
element.offsetWidth和style.width區(qū)別：
1.style.width返回值除了數(shù)字外還帶有單位px矢棚；
2.如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小，style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值府喳；
3.如果沒有給 HTML 元素指定過 width樣式蒲肋，則style.width返回的是空字符串；
4.style.width不包含border和padding钝满。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%; margin:0; padding:0;}
.wrap{width: 600px;height: 600px;background: #000;border: 3px solid green;position: relative;}
.box{width:300px;height: 400px; border: 5px solid #fff;padding:5px;margin: 30px}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="box" id="box"></div>
</div>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById("wrap");
var box=document.getElementById("box");
var oW=box.offsetWidth;
var oT=box.offsetTop;
console.log(oW);//返回320,包含padding+border+width
console.log(oT);//返回30,不包含父級的border
}
</script>
4.client系列
-
element.clientWidth: 獲取對象可見內(nèi)容的寬度兜粘，不包括滾動條，不包括邊框弯蚜； -
element.clientHeight: 獲取對象可見內(nèi)容的高度孔轴，不包括滾動條，不包括邊框熟吏； -
element.clientLeft: 獲取對象的border寬度 -
element.clientTop：獲取對象的border高度
5.scroll系列
-
element.scrollWidth:獲取對象的滾動寬度 距糖。 -
element.scrollHeight: 獲取對象的滾動高度。 -
element.scrollLeft:設(shè)置或獲取位于對象左邊界和對象中目前可見內(nèi)容的最左端之間的距離(width+padding為一體) -
element.scrollTop:設(shè)置或獲取位于對象最頂端和對象中可見內(nèi)容的最頂端之間的距離牵寺；(height+padding為一體)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{height: 100%; margin:0; padding:0;}
.wrap{width: 600px;height: 600px;border: 3px solid green;position: relative;}
.box{width:300px;height: 400px; border: 3px solid red;padding:5px;margin: 30px;overflow: auto;}
.box p{font-size: 20px;line-height: 36px;}
</style>
</head>
<body>
<!-- 設(shè)置父級 -->
<div class="wrap" id="wrap">
<div class="box" id="box">
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
<p>測試</p>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById("wrap");
var box=document.getElementById("box");
var oW=box.offsetWidth;
var oH=box.offsetHeight;
var oT=box.offsetTop;
var cW=box.clientWidth;
var cH=box.clientHeight;
var cT=box.clientTop;
console.log('box.offsetWidth:'+oW);//返回box.offsetWidth:316
console.log('box.offsetHeight:'+oH);//返回box.offsetHeight:416
console.log('box.offsetTop:'+oT);//返回box.offsetTop:30
console.log('box.clientWidth:'+cW);//返回box.clientWidth:293
console.log('box.clientHeight:'+cH);//返回box.clientHeight:410
console.log('box.clientTop:'+cT);//返回box.clientTop:3
console.log('box.scrollWidth:'+sW);//返回box.scrollWidth:293
console.log('box.scrollHeight:'+sH);//返回box.scrollHeight:1018
}
</script>
</body>
</html>
document.body和document.documentElement兼容問題
- body是DOM對象里的body子節(jié)點悍引，即 <body> 標簽；documentElement 是整個節(jié)點樹的根節(jié)點root帽氓，即<html> 標簽趣斤；
- 整個文檔的一個根就是,在DOM中可以使用document.documentElement來訪問它，它就是整個節(jié)點樹的根節(jié)點黎休。而body是子節(jié)點浓领，要訪問到body標簽玉凯，在腳本中可以寫：document.body。
- 參考鏈接 clientHeight , scrollHeight , offsetHeight之間的區(qū)別及兼容方案
- JS中完美兼容各大瀏覽器的scrolltop方法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
二.js獲取頁面坐標數(shù)據(jù)
1.client系列
-
event.clientX:設(shè)置或獲取鼠標指針位置相對于當前窗口的 x 坐標联贩，其中客戶區(qū)域不包括窗口自身的控件和滾動條漫仆。 -
event.clientY: 設(shè)置或獲取鼠標指針位置相對于當前窗口的 y 坐標，其中客戶區(qū)域不包括窗口自身的控件和滾動條泪幌。
2.screen系列
-
event.screenX： 設(shè)置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標盲厌。 -
event.screenY： 設(shè)置或獲取鼠標指針位置相對于用戶屏幕的 y 坐標。
3.offset系列
-
event.offsetX：,鼠標相比較于觸發(fā)事件的元素的X位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點,如果有boder,可能出現(xiàn)負值祸泪。 -
event.offsetY：同上吗浩，Y位置。
4.layer系列（IE8以及以下版本沒有）
-
event.layerX：鼠標相比較于當前坐標系的X位置,即如果觸發(fā)元素沒有設(shè)置絕對定位或相對定位,以頁面為參考點,如果有,將改變參考坐標系,從觸發(fā)元素盒子模型的border區(qū)域的左上角為參考點 -
event.layerY：同上没隘，Y位置懂扼。
5.XY系列（FF沒有）
-
event.x：相對可視區(qū)域的X坐標 -
event.y：相對可視區(qū)域的Y坐標
6.page系列 （IE8以及以下版本沒有）
- 類似于
event.clientX、event.clientY右蒲，但它們使用的是文檔坐標而非窗口坐標阀湿。。 -
event.pageX：設(shè)置或獲取鼠標指針位置相對于當前文檔的 x 坐標 -
event.pageY：設(shè)置或獲取鼠標指針位置相對于當前文檔的 y 坐標
document.onclick = function(e){
e = e || window.event;
console.log('e.clientX:',e.clientX);
console.log('e.screenX:',e.screenX);
console.log('e.offsetX:',e.offsetX);
console.log('e.layerX:',e.layerX);
console.log('e.pageX:',e.pageX);
console.log('e.x:',e.x);
}
三品嚣、jQuery對應(yīng)寫法
- 參考鏈接 js炕倘、jq獲取對象位置 對象寬高
整理了這么多，復習了一遍有些概念在心中歸類更明確了點翰撑，如有錯誤罩旋，歡迎指證。
