js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

网页可见区域宽:
document.body.clientWidth;

网页可见区域高:
document.body.clientHeight;

(点击查看大图)

网页可见区域宽:
document.body.offsetWidth (包括边线的宽);

网页可见区域高:
document.body.offsetHeight (包括边线的宽);

(点击查看大图)

有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的。

网页正文全文宽:
document.body.scrollWidth;

网页正文全文高:
document.body.scrollHeight;

(点击查看大图)
?
无论DTD是否声明,在HTML中,document.body.scrollHeight和document.body.scrollWidth 都表示浏览器所有内容高度。
这里有一个要注意的地方,兼容性的写法 document.documentElement.scrollHeight
在DTD声明中的不同表现
具体可以参考
http://www.cnblogs.com/blackwood/archive/2013/03/12/2955472.html

网页被卷去的高:
document.body.scrollTop;

网页被卷去的左:
document.body.scrollLeft;

(点击查看大图)

DTD是否声明,影响scrollTop的值,请参考
http://www.kixi.com.cn/blog/?p=2811

浏览器的位置上:
window.screenTop;

浏览器的位置左:
window.screenLeft;

(点击查看大图)

在IE和FF的浏览器中,分别要使用screenTop和screenY,screenLeft和screenX
具体请参考:
浏览器窗口位置Window
screenLeft、screenTop属性

屏幕分辨率的高:
window.screen.height;

屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度:
window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

(点击查看大图)

window.screen.availHeight和window.screen.availWidth表示屏幕的高/宽(除开屏幕底的状态条)像素
window.screen.heght和window.screen.width表示屏幕的全高和全宽(包含底部的工具栏)
可以查看在线实例,自己仔细体会下!
js调用screen的相关属性

pageX鼠标点所在位置的X轴全像素位移(包含滚动的部分)
pageY鼠标点所在位置的Y轴全像素位移(包含滚动的部分)

(点击查看大图)

在线测试##http://jsfiddle.net/kixi/3HEJe/

offsetX鼠标所在位置对应的元素的左上角(0,0)与鼠标点的X轴的像素距离,IE、chrome下有效
offsetY鼠标所在位置对应的元素的左上角(0,0)与鼠标点的Y轴的像素距离,IE、chrome下有效
(点击查看大图)

在线例子  http://jsfiddle.net/kixi/5EL6m/ 

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明),布布扣,bubuko.com

时间: 2024-08-12 08:11:42

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)的相关文章

js获取浏览器和设备相关width(屏幕的宽度)

首先呢,我们将iPhone手机的相关数据表示如下 我们要理解很多东西,比如逻辑分辨率.物理分辨率.缩放因子.ppi等,这里先不讨论. 首先呢,我们先介绍下各个屏幕宽度: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽:

JS 获取浏览器和屏幕宽高信息(转载)

JS 获取浏览器和屏幕宽高信息 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:documen

js 获取浏览器高度和宽度值

js 获取浏览器高度和宽度值 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY

JQuery+Js 获取浏览器高度和宽度

JQuery-------做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括bor

js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)

js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011-07-28 17:20 6532人阅读 评论(1) 收藏 举报 浏览器firefoxopera文档htmlie 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offs

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (windows.innerHeight) winHeight = windows.innerHeight; el

JS获取浏览器可视区域尺寸

在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: document.documentElement.clientWidth document.documentElement.clientHeight IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸: 同时,除了IE以外

js 获取浏览器版本

1.在web开发中,会经常让你判断当前使用的是那个浏览器及浏览器的那个版本,根据浏览器版本来调整CSS的样式, 使在web界面在各个浏览器展现达到最佳的效果,下面是获取当前浏览器的代码: getBrowserVersion:function(){ var agent = navigator.userAgent.toLowerCase(); var arr=[]; var Browser=""; var Bversion=""; var verinNum="

js 获取浏览器版本号

1.在web开发中,会常常让你推断当前使用的是那个浏览器及浏览器的那个版本号,依据浏览器版本号来调整CSS的样式, 使在web界面在各个浏览器展现达到最佳的效果,以下是获取当前浏览器的代码: getBrowserVersion:function(){ var agent = navigator.userAgent.toLowerCase(); var arr=[]; var Browser=""; var Bversion=""; var verinNum=&quo