javascript获取屏幕,浏览器及网页的宽度和高度

如果你相信一件事,就去相信,不用等别人来告诉你行或者不行!早安!你不能改变过去,但你可以改变未来。早安!争气永远比生气漂亮。

在前端的动态逻辑中,有时候需要使用js获取浏览器可视区域,屏幕或是网页的宽度和高度。那么在原生的js代码是能让jq插件中是如何操作的呢?

原生js获取各个对象的高度和宽度

js代码:

IE浏览器:

document.body.clientWidth //BODY对象宽度
document.body.clientHeight //BODY对象高度
document.documentElement.clientWidth //可见区域宽度
document.documentElement.clientHeight //可见区域高度

FireFox浏览器:

document.body.clientWidth //BODY对象宽度
document.body.clientHeight //BODY对象高度
document.documentElement.clientWidth //可见区域宽度
document.documentElement.clientHeight //可见区域高度

Opera浏览器:

document.body.clientWidth //可见区域宽度
document.body.clientHeight //可见区域高度
document.documentElement.clientWidth //页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight //页面对象高度(即BODY对象高度加上Margin高)

获取其他参数

alert(document.body.clientWidth);//网页可见区域宽(body)
alert(document.body.clientHeight);//网页可见区域高(body)
alert(document.body.offsetWidth);//网页可见区域宽(body),包括border、margin等
alert(document.body.offsetHeight);//网页可见区域宽(body),包括border、margin等
alert(document.body.scrollWidth);//网页正文全文宽,包括有滚动条时的未见区域
alert(document.body.scrollHeight);//网页正文全文高,包括有滚动条时的未见区域
alert(document.body.scrollTop);//网页被卷去的Top(滚动条)
alert(document.body.scrollLeft);//网页被卷去的Left(滚动条)
alert(window.screenTop);//浏览器距离Top
alert(window.screenLeft);//浏览器距离Left
alert(window.screen.height);//屏幕分辨率的高
alert(window.screen.width);//屏幕分辨率的宽
alert(window.screen.availHeight);//屏幕可用工作区的高
alert(window.screen.availWidth);//屏幕可用工作区的宽

jq获取浏览器以及网页的各个参数

相对原生的js代码来说,jquery操作起来要简单的很高。

注意:以下代码使用之前,一定要加载jquery.js

jq代码:

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height());//浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width());//浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

本文javascript获取屏幕,浏览器及网页的宽度和高度到此结束。有努力就会成功!小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
JS获取鼠标点击时的位置

JS获取URL参数

Ajax跨域问题及解决方案(jsonp,cors)

ajax动态加载json数据并详细解析

ajax从JSP传递对象数组到后台的方法