每日一学：如何用js去获取屏幕的大小

分享一个小应用：如何用js去获取屏幕的大小。

如果您使用的是jQuery，则可以使用jQuery方法获取窗口或document的大小：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

屏幕大小

对于屏幕大小你可以使用以下代码实现：

screen.height;
screen.width;

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

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

大家可以收藏下。