獲取屏幕窗口信息
// 網頁可見區域寬： document.body.clientWidth;
// 網頁可見區域高： document.body.clientHeight;
// 網頁可見區域寬： 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;
// 屏幕可用工作區寬度：window.screen.availWidth;
// scrollHeight: 獲取對象的滾動高度。
// scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
// scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
// scrollWidth:獲取對象的滾動寬度
// offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
// offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
// offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
// event.clientX 相對文檔的水平座標
// event.clientY 相對文檔的垂直座標
// event.offsetX 相對容器的水平坐標
// event.offsetY 相對容器的垂直坐標
// document.documentElement.scrollTop 垂直方向滾動的值
// event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
// 滾動條事件(兼容safari)
window.onscroll = function(){
//頁面有聲明doctype用document.documentElement.scrollTop獲取;
//window.pageYOffset用於獲取safari瀏覽器;
//頁面沒有聲明doctype用document.body.scrollTop獲取;
var top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
console.log(‘滾動條位置-----‘+top);
}
// 窗口改變事件
window.onresize = function(){
var w = document.body.clientWidth;
console.log(‘當前可視寬度為----‘+ w);
}
獲取屏幕窗口信息