一、js部分
1.获取屏幕尺寸
获取屏幕宽度:window.screen.width; //整个屏幕的宽度
获取屏幕高度:window.screen.height; //整个屏幕的高度
2.获取可用工作区尺寸
获取屏幕可用工作区域宽度:window.screen.availWidth; //pc端与上面两个一致,移动端除个别其他也一致(试一下即可)
获取屏幕可用工作区域高度:window.screen.availHeight;
3.获取body的宽高(不含边框)
获取网页内body的宽度:document.body.clientWidth; //client不包括边框
获取网页内body的高度:document.body.clientHeight;
4.获取网页的宽高
获取整个网页的宽度:document.body.scrollWidth
获取整个网页的高度:document.body.scrollHeight
- document.body.scrollHeight 为网页可见高度加上未显示的网页的高度(滚动条未显示部分)即整个网页的高度
5.获取body的宽高(含边框)
获取网页内body的宽度:document.body.offsetWidth //offset包括边框
获取网页内body的高度:document.body.offsetHeight
6.获取元素到顶部的距离
获取元素到顶部的距离:document.getElementsByClassName(“div”)[0].offsetTop
获取元素到左边的距离:document.getElementsByClassName(“div”)[0].offsetLeft
7.获取滚动条到top和left的距离
获取滚动条到顶部的距离:document.body.scrollTop / document.documentElement.scrollTop
获取滚动条到左边的距离:document.body.scrollLeft / document.documentElement.scrollLeft
二、JQ部分
1、获取当前窗口浏览器宽高
获取当前窗口浏览器可视区域宽度:( w i n d o w ) . w i d t h ( ) ; 获 取 当 前 窗 口 浏 览 器 可 视 区 域 高 度 : (window).width(); 获取当前窗口浏览器可视区域高度:(window).width();获取当前窗口浏览器可视区域高度:(window).height();
2、获取当前窗口文档高宽
获取当前窗口文档宽度:( d o c u m e n t ) . w i d t h ( ) ; 获 取 当 前 窗 口 文 档 高 度 : (document).width(); 获取当前窗口文档高度:(document).width();获取当前窗口文档高度:(document).height();
3、获取当前窗口body高宽
获取body宽度:( d o c u m e n t . b o d y ) . w i d t h ( ) ; 获 取 b o d y 高 度 : (document.body).width(); 获取body高度:(document.body).width();获取body高度:(document.body).height();