100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > JS如何获取屏幕 浏览器及网页高度宽度?

JS如何获取屏幕 浏览器及网页高度宽度?

时间:2023-05-20 19:43:50

相关推荐

JS如何获取屏幕 浏览器及网页高度宽度?

目的

在浏览器中,用JS获取高度和宽度都各有3种,分别包括屏幕,浏览器和网页的。用来解决各种计算定位问题!以至于我各种记不住,写个随笔方便查询。

屏幕宽高

说明:顾名思义,屏幕宽高是指显示器的分辨率。系统分辨率可以改变这个宽高。

获取方法:

console.log('宽度:', window.screen.width)console.log('高度:', window.screen.height)

浏览器可用工作区的宽高

说明:浏览器宽高是指浏览器窗口最大化时的宽高,普通的最大化后,一般就是去掉系统任务栏高度,而宽度和屏幕宽是一样的。这个宽高在任务栏占用空间变化时会变化。

获取方法:

console.log('宽度:', window.screen.availWidth)console.log('高度:', window.screen.availHeight)

网页宽高

说明:网页宽高,是指页面所占的宽高,浏览器除了页面内容以外的部分,不计算在内。标签栏,地址栏,书签栏,控制台等全不计算在宽高的范围里面,只有网页内容区域才是。

获取方法:

console.log('宽度:', window.innerWidth)console.log('高度:', window.innerHeight)

其他(获取浏览器和屏幕各种高度宽度)

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; //浏览器距离Topwindow.screenLeft;//浏览器距离Left

jQuery方法:

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。