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

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)


网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的。


网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)?
无论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;

(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
DTD是否声明,影响scrollTop的值,请参考
http://www.kixi.com.cn/blog/?p=2811


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

(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
在IE和FF的浏览器中,分别要使用screenTop和screenY,screenLeft和screenX
具体请参考:
浏览器窗口位置Window screenLeft、screenTop属性


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

(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
window.screen.availHeight和window.screen.availWidth表示屏幕的高/宽(除开屏幕底的状态条)像素
window.screen.heght和window.screen.width表示屏幕的全高和全宽(包含底部的工具栏)
可以查看在线实例,自己仔细体会下!
js调用screen的相关属性
 

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

(点击查看大图)
js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
在线测试##http://jsfiddle.net/kixi/3HEJe/
 

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

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
在线例子  http://jsfiddle.net/kixi/5EL6m/   

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

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

上一篇:web中的水晶报表 "出现通信错误。将停止打印"


下一篇:Notation, First Definitions 转 http://brnt.eu/phd/node9.html