井井客

搜索

JS与JQ获取浏览器和屏幕尺寸

获取屏幕尺寸以及获取浏览器尺寸虽然不常用,但是偶尔会在页面变换尺寸而影响效果时,考虑通过JS获取屏幕尺寸或浏览器尺寸等进行计算来达到完美效果。

JS与JQ获取浏览器和屏幕尺寸

(1)JS获取浏览器和屏幕的宽高

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

(2)JQ获取浏览器和屏幕的宽高

$(window).width()			//浏览器当前窗口可视区域宽度
$(window).height()			//浏览器当前窗口可视区域高度
$(document).height()			//浏览器当前窗口文档的高度
$(document).width()			//浏览器当前窗口文档对象宽度
$(document.body).height()		//浏览器当前窗口文档body的高度
$(document.body).width()		//浏览器当前窗口文档body的宽度
$(document.body).outerHeight(true)	//浏览器当前窗口文档body的总高度 包括border padding margin
$(document.body).outerWidth(true)	//浏览器当前窗口文档body的总宽度 包括border padding margin
$(document).scrollTop()			//获取滚动条到顶部的垂直高度
$(document).scrollLeft()		//获取滚动条到左边的垂直宽度

互联网上这些相关的文章也比较多,但是考虑过后还是备份了一下。

对JQ和JS会有一些混淆,平时对JQ要熟悉一些,但是JS还是会点陌生,备份下次用的时候再直接打开,比较方便。

文章TAG:JS

作者:井井客整理来源:互联网
本文标题:JS与JQ获取浏览器和屏幕尺寸
本文链接:/c/0194.html

上一篇:jq不间断向上滚动代码完全兼容
下一篇:input点击文字消失 离开若无值则显示初始值

文章分类

相关阅读

随便看看