js中的各种宽高

1.window.screen

window.screen中包含了用户的屏幕信息

1.1获取用户设备屏宽高或屏幕分辨率的方法
{
let screenW=window.screen.Width;//用户屏幕的宽
let ScreenH=window.screen.Height;//用户屏幕的高
console.log(screenW+","+screenH);//向控制台输出
}

1.2获取屏幕可用工作区分辨率()
{
let availW=window.screen.availWidth;
let availH=window.screen.availHeight;
console.log(availW+","+availH);//向控制台输出
}

1.3浏览器相对于整个屏幕的位置
{
let screenleft=window.screenLeft;
let Screentop=window.screenTop;
console.log(screenleft+","+screentop);//向控制台输出
}

1.4获取浏览器窗口的大小
{
let broW=window.outerWidth;
let broH=window.outerHeight;
console.log(broW+","+broH);//向控制台输出
}

1.5获取工作区的窗口大小
{
let workW=window.innerWidth;
let workH=window.innerHeight;
console.log(workW+","+workH);//向控制台输出
}

2.document.body

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签

3.关于获取鼠标或着光标的位置

{
let ev=ev||window.event;//兼容性写法
let mouseX=e.clientX||e.pageX;
let mouseY=e.clientY||e.pageY;
}

//距离事件源的定位
{
let ev=ev||window.event;
let mouseX=e.offsetX;
let mouseY=e.offsetY;
}
}