原生JS中各种宽度,高度,距离 - - 欢迎纠错和补充

gan1235188 · 发表于 2015-2-5 17:46:24

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都兼容

gan1235188 · 发表于 2015-2-6 10:34:44

纠错....我郁闷了,div没有width和height属性....所以,应该改成<canvas width='400' height='400'></canvas>

gan1235188 · 发表于 2015-2-6 10:39:15

补充

8,event.screenX - - event.screenY
//表示鼠标在显示器中的坐标,兼容所有主流浏览器,包括IE8;

atlantis2007 · 发表于 2015-2-16 14:53:10

楼主，发的挺全的哈，收藏了，

帐号		自动登录	找回密码
密码			注册

[讨论] 原生JS中各种宽度,高度,距离 - - 欢迎纠错和补充