找回密码
 注册

QQ登录

只需一步,快速开始

查看: 8907|回复: 3

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

[复制链接]
发表于 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都兼容
 楼主| 发表于 2015-2-6 10:34:44 | 显示全部楼层
纠错....我郁闷了,div没有width和height属性....所以,应该改成<canvas width='400' height='400'></canvas>
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-2-6 10:39:15 | 显示全部楼层
补充

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

使用道具 举报

发表于 2015-2-16 14:53:10 | 显示全部楼层
楼主,发的挺全的哈,收藏了,
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-1-21 16:21 , Processed in 0.056857 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表