获取---屏幕,可视区,页面内容,浏览器宽高,事件等

3,279 阅读4分钟

1、JavaScript

(absolute:绝对定位。它是相对不是static的最近一级父元素来进行定位的,如果没有这样的元素,那么就相对body元素来进行定位,被定位元素会脱离文档流,然后我们可以通过left,right,top,bottom来调整元素的位置。)


window.screen.height:屏幕分辨率的高(屏幕的高度 )
window.screen.width:屏幕分辨率的宽 (屏幕的宽度 ) window.screen.availHeight:屏幕可用工作区的高
window.screen.availWidth:屏幕可用工作区的高
window.screenTop:浏览器窗口距离电脑屏幕上边界的距离
window.screenLeft:浏览器窗口距离电脑屏幕左边界的距离


window. innerWidth :浏览器可视区域的内宽度,包含滚动条
window.innerHeight:浏览器可视区域的内高度,包含滚动条
window.outerWidth:浏览器宽度
window.outerHeight:浏览器高度


window.pageYOffset:需要网页存在滚动条才可以,存在竖向滚动条时,网页正文向下滚动一段距离n px,该值即为n
window.pageXOffset:同理,无滚动条值为0
document.body.scrollTop:网页下滑的距离(与上一对值相同,滚动条位置)
document.body.scrollLeft:网页左滑的距离
document.documentElement.scrollTop:与上一对值相同(与上一对都是获得滚动条位置,但是存在兼容问题)
document.documentElement.scrollLeft

兼容问题,具体与html文件头的<DOCTYPE...>有关 var srollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;


document.documentElement.scrollWidth:获取网页正文全文宽(包括滚动部分)
document.documentElement.scrollHeight:获取网页正文全文高(包括滚动部分)
document.body.scrollWidth:与上一对值相同
document.body.scrollHeight:


document.documentElement.offsetWidth:与下一对值相同
document.documentElement.offsetHeight:
document.body.offsetWidth: 获取可视区域的宽度(同clientWidth)
document.body.offsetHeight:获取body的总高度(同scrollHeight)


document.body.clientWidth:获取可视区域的宽(可以进行页面展示的,不包含边线,例如body{border:10px solid red;})
documment.body.clientHeight:获取可视区域的高(可以进行页面展示的)
document.documentElement.clientWidth:页面可视宽度,但是不包含滚动条组件的十几px像素
document.documentElement.clientHeight:可视区域高度, 实际上就是 元素,只不过显示的是可见的部分,即浏览器窗口大小(网页无滚动条时与window.innerHeight同值)


事件event

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量


元素

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。 scrollWidth:获取对象的滚动宽度

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置


浏览器相关属性表现:

CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关

offsetTop返回的是数字,而style.top返回的是字符串,带有单位
offsetTop只读,而style.top可读可写
如果没有给相应html元素指定top的样式,则style.top返回的空字符串

给top赋值时要带上单位px,否则无效

IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height+ padding + border
**IE5.0/5.5: ** clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height


相关实例

1、要获取当前页面的滚动条的纵坐标的位置,应该用:

document.documentElement.scrollTop 之所以不用document.body.scrollTop的原因是documentElement对应的是html标签,而body对应的是body标签

2、关于document.body和document.documentElement的区别

body是DOM对象中body的子节点,即标签,而documentElement是整个节点树的根结点,即标签。
即document.body.clientHeight获取到的是body的高度,而document.documentElement.clientHeight获取到的是整个html的高度,然而当文档处于怪癖模式下时,我们使用document.documentElement.scrollTop获取到属性的值是为0的,而在w3c标准文档模式下,document.body.scrollTop的值是为0的,因此为了好的兼容性,我们可以这样写:
var top = document.documentElement.scrollHeight || document.body.scrollHeight

3、当想定位鼠标相对于页面的绝对位置时,我们一般会使用如下代码 event.clientX+document.body.scrollLeft

这时我们应该注意,可能会有鼠标定位偏离你的预想的情况发生,这是因为ie5.5之后已经不支持document.body.scrollX对象了,因此为了好的兼容系那个我们应该做以下判断。

if (document.body && document.body.scrollTop && document.body.scrollLeft) 
{ 
    top=document.body.scrollTop; 
    left=document.body.scrollleft;     
} 
if (document .documentElement && document .documentElement.scrollTop && document .documentElement.scrollLeft) 
{ 
    top=document.documentElement.scrollTop; 
    left=document.documentElement.scrollLeft; 
}

本文未经过校验,欢迎指出错误
感谢以下博主的总结, 材料来源 :www.cnblogs.com/polk6/p/505… (有图部分)
segmentfault.com/a/119000000…
blog.csdn.net/qq_22855325…