js获取浏览器与屏幕宽度高度

发布时间:2021-01-10编辑:脚本学堂
本文介绍了js获取屏幕宽度与高度的方法,分享一例获取浏览器即屏幕尺寸信息的代码,有需要的朋友参考下。

在js操作dom时,经常用到浏览器的高度和宽度来调节dom的位置。

例如:
 

复制代码 代码示例:
<script language="javascript">
function getdocumentsize(){
var str = '';
str+=document.body.clientwidth+"rn";//网页可见区域宽
str+=document.body.clientheight+"rn";//网页可见区域高
str+=document.body.offsetwidth+"rn";//网页可见区域高(包括边线的宽)
str+=document.body.offsetheight+"rn";//网页可见区域高(包括边线的宽)
str+=document.body.scrollwidth+"rn";//网页正文全文宽
str+=document.body.scrollheight+"rn";//网页正文全文高
str+=document.body.scrolltop+"rn";//网页被卷去的高
str+=document.body.scrollleft+"rn";//网页被卷去的左
str+=window.screentop+"rn";//网页正文部分上
str+=window.screenleft+"rn";//网页正文部分左
str+=window.screen.height+"rn";//屏幕分辨率的高
str+=window.screen.width+"rn";//屏幕分辨率的宽
str+=window.screen.availheight+"rn";//屏幕可用工作区高度
str+=window.screen.availwidth+"rn";//屏幕可用工作区宽度
alert(str);
}
</script>

代码说明:
1、document.body.scrolltop与document.body.clientheight有时是无效的,究其原因是因为声明了doctype:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
当声明了doctype以后,document.body.scrolltop的值永远等于0。

解决办法:
将document.body用document.documentelement替换即可。

2、window.screentop 与window.screenleft在firefox中是没有定义的,它仅能在ie里发挥作用,指的是网页正文部分上与显示器屏幕上的边的距离。
其实这个高度也是很有用的,当需要使用open函数打开一个窗口时,即可利用这个距离来给新打开的窗口定位。

js获取屏幕宽度实例代码
js获取屏幕宽度代码分享
js获取屏幕高度 js屏幕属性信息
js获取屏幕高度与宽度
js与jquery获取屏幕宽度与高度
js 获取浏览器与屏幕宽高信息
JS和jquery获取浏览器屏幕的宽度与高度
js获取浏览器屏幕宽高的方法(浏览器兼容)
JS获取屏幕、浏览器窗口大小、网页高度宽度的方法详解