- UID
- 656607
- 在线时间
- 小时
- 积分
- 632
- 帖子
- 离线
- 18648 天
- 注册时间
- 2013-9-17
|
js中有太多的宽高,距离,而且,兼容情况不一,下面是总结的一些,欢迎大家测试 - - 纠错 以及补充.
html元素距离,宽度,高度特别多,下面总结了一些原生js获取元素距离,宽度,高度的方法和兼容情况
//注意,以下内容都是在<!DOCTYPE html> //html5声明中使用测试
下面node代表元素对象,event需要做兼容处理 //event=event||window.event;
距离
1,node.scrollTop - - node.scrollLeft //元素内容上滚的高度 //所有主流浏览器都兼容
2,event.offsetX - - event.offsetY //鼠标在当前元素中的坐标 //所有主流浏览器都兼容但是因为盒模式的不同,在IE和其他标准浏览器中获取的坐标值有一定差异
3,event.clientX - - event.clientY //鼠标在文档中的坐标 所有主流浏览器都兼容
4,event.pageX - - event.pageY //鼠标在文档中的坐标 IE9+以及其它主流浏览器都兼容
5,node.offsetTop - - node.offsetLeft //元素距离父元素的高度和宽度,兼容所有主流浏览器,包括IE8
高度- - 宽度
1,node.style.width - - node.style.width
//元素标签中以属性写的宽高 (如<div width="400"></div>), 主流浏览器都兼容
2,node.offsetHeight - - node.offsetWidth //注意:不包含溢出部分
//如果node不是body,那么,此处是元素的最终的高度和宽度(如何内容溢出,则不包含溢出部分),而且,主流浏览器都一样,IE8也兼容,
//如果node是body,那么,此处在标准浏览器代表整个文档的高度(如何设定了body的高度,那么,就是设置的高度,溢出部分不计算),跟窗口大小无关,但是在IE8中却表示的是浏览器窗口的高度(不管是否设置body高度,是否溢出,在IE8中,此值都不变化).
3,window.screen.height - -window.screen.width //都表示显示器的高度和宽度,与窗口大小无关,兼容主流浏览器,包括IE8
4,node.scrollWidth - - node.scrollHeight //表示元素的内容区的高度和宽度,如果元素没有设置overflow:hidden;那么,此处的宽高包含了溢出以后的宽高
5,window.screen.availHeight - - window.screen.availWidth //表示屏幕可工作区的宽高,除去任务栏等;
6,node.clientHeight - - node.clientWidth
//如果node不是body,则此值与offsetHeight,offsetWidth相等.
//如果node是body,则此值表示浏览器窗口区的宽高,调整浏览器窗口大小,值也会相应变化 兼容主流浏览器
7,window.innerHeight - - window.innerWidth;
//表示浏览器窗口的宽高,值==document.documentElement.clientHeight 主流浏览器除了IE8都兼容 |
|