首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种。属性根据不同的兼容性也分为五种

  1. window.innerWidth //除去菜单栏的窗口宽度,与浏览器相关
  2. window.innerHeight//除去菜单栏的窗口高度,与浏览器相关
  3. window.outerWidth//包括菜单栏的窗口宽度,与浏览器相关
  4. window.outerHeight//包括菜单栏的窗口宽度,与浏览器相关
  5. window.screen.height//电脑整个屏幕的高度与浏览器无关
  6. window.screen.width//电脑整个屏幕的宽度与浏览器无关
  7. window.screen.availHeight//电脑屏幕的可利用高度,不包含任务栏,与浏览器无关,应该是获取window对象的属性。
  8. window.screen.availWidth//电脑屏幕的可利用宽度,不包含任务栏,与浏览器无关,应该是获取window对象的属性。
  9. window.screenTop//浏览器距离屏幕的高度与浏览器无关
  10. window.screenLeft//浏览器距离屏幕左侧的距离宽度与浏览器无关
  11. document.body.clientWidth//指元素的自身宽度(包括padding),网页可见区域宽,不包括滚动条
  12. document.body.clientHeight//指元素的自身的高度(包括padding),网页可见区域高
  13. document.body.clientLeft//子级div内容位置到父级内容区域的视区宽度距离(获得的是border值)
  14. document.body.clientTop//子级div内容位置到父级内容区域的高度距离(获得的是border值)
  15. document.body.offsetWidth//指定元素的宽度(包括padding,border和内容),包括滚动条
  16. document.body.offsetHeight//指定元素的高度(包括padding,border和内容)
  17. document.body.offsetTop//距离父级元素的高度,默认是document
  18. document.body.offsetLeft//距离父级元素的宽度,默认是document
  19. document.body.scrollWidth//获取的是文档的宽度(当指定的宽度小于浏览器窗口的时候,为浏览器的宽度)(无滚动条时会等于clientWidth)
  20. document.body.scrollHeight//获取的是文档的高度(当指定的高度小于浏览器窗口的时候,为浏览器的高度)(一般情况下会等于clientHeight)
  21. document.body.scrollTop//文档被滚动上去的时候(即滚动条往上滚动的距离)
  22. document.body.scrollLeft//文档被滚动右去的时候(即滚动条往右滚动的距离)

1.与浏览器无关
window.innerWidth
window.outerWidth
window.screen.width
window.screen.availWidth
window.screenLeft (浏览器距离屏幕左侧的距离宽度)

2.与浏览器有关

语法:document.documentElement.clientWidth.或者doucment.body.clientWidth.

clientWidth(距离父级元素clientLeft)

offsetWidth(距离父级元素offsetLeft)

scrollWidth(距离滚动条顶部scrollTop)

一般无滚动条情况下offsetWidth=clientWidth=scrollWidth(有可能误差1px)

IE浏览器兼容写法:

  document.body.scrollTop

  document.body.offsetWidth

  document.body.clientHeight

Chrome浏览器兼容写法:

  var scrolltop = document.documentElement.scrollTop   /*获取滚动条距离顶部得距离*/

  var clientHeight = document.documentElement.clientHeight; /*获取页面可视区的高度*/

  var offset = document.documentElement.offsetWidth;  /*获取页面可视区的高度,包含border*/

 

js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:

  • event.clientX/Y   /*相对于浏览器窗口*/
  • event.pageX/Y  
  • event.offsetX/Y
  • event.layerX/Y
  • event.screenX/Y      /*相对于屏幕*/

clientX/Y

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变。
兼容性:所有浏览器均支持

pageX/Y

pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变
兼容性:除IE6/7/8不支持外,其余浏览器均支持

offsetX/Y

offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。

兼容性:IE所有版本,chrome,Safari均完美支持,Firefox不支持

layerX/Y

layerX/Y获取到的是触发点相对被触发dom左上角的距离,数值与offsetX/Y相同,这个变量就是firefox用来替代offsetX/Y的,基准点为边框左上角,但是有个条件就是,被触发的dom需要设置为position:relative或者position:absolute,否则会返回相对html文档区域左上角的距离。

兼容性:IE6/7/8不支持,opera不支持,IE9/10和Chrome、Safari均支持

screenX/Y

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变。
兼容性:所有浏览器均支持

function getMouseMove(event) {
var e = event || window.event;

  console.log(e.clientX);
}
如果想了解移动触摸坐标属性详细请看我的另一篇文章

Js获取宽高度的归纳集锦总结的更多相关文章

  1. Js获取宽高度的归纳总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种. window.innerWidth //除去菜单栏的窗口宽度 window.innerHeight//除去菜单栏的窗口高度 win ...

  2. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  3. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  4. 【转】js 获取浏览器高度和宽度值(多浏览器

    原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...

  5. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  6. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  7. JS获取浏览器高度 并赋值给类

    在给网站做轮播焦点图的时候,如果需要全屏的话,可以用下面的jQuery来获取浏览器高度,然后赋值给类. $(window).load(function () { var maxHeight = 0; ...

  8. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  9. js 获取浏览器高度和宽度值(多浏览器)(转)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

随机推荐

  1. Erlang模块file翻译

    模块摘要     文件接口模块   描述     模块file提供了文件系统的接口.     在具有线程支持的操作系统上,可以让文件操作以其自己的线程执行,从而允许其他Erlang进程与文件操作并行地 ...

  2. Java深拷贝与序列化

    对基本类型的变量进行拷贝非常简单,直接赋值给另外一个对象即可: int b = 50; int a = b; // 基本类型赋值 对于引用类型的变量(例如 String),情况稍微复杂一些,因为直接等 ...

  3. 2019年江苏高考数学真题LaTeX排版

    文档pdf中点击以下链接,可进行下载! https://hoganbin.top/post/2531000494/2019%E5%B9%B4%E6%B1%9F%E8%8B%8F%E9%AB%98%E8 ...

  4. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  5. C#中Path类的常用方法

    场景 打开VS,输入Path,我们可以看到其定义. 都是静态方法,所以我们可以使用类名直接调用. 实现 新建命令行程序,编码如下: string str = @"C:\Users\Admin ...

  6. Winform中设置ZedGraph曲线图的字体样式是避免出现边框

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  7. Winform中实现读取xml配置文件并动态配置ZedGraph的RadioGroup的选项

    场景 Winform中对ZedGraph的RadioGroup进行数据源绑定,即通过代码添加选项: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...

  8. Elastic Stack 笔记(四)Elasticsearch5.6 索引及文档管理

    博客地址:http://www.moonxy.com 一.前言 在 Elasticsearch 中,对文档进行索引等操作时,既可以通过 RESTful 接口进行操作,也可以通过 Java 也可以通过 ...

  9. 第1次作业-Numpy练习

    1.创建一个边界值为1而内部都是0的数组,图例如下:[提示:]解此题可以先把所有值都设置为1,这是大正方形:其次,把边界除外小正方形全部设置为0.本题用到numpy的切片原理.多维数组同样遵循x[st ...

  10. tomcat启动出现乱码

    打开tomcat目录下apache-tomcat-9.0.26\conf\logging.properties 替换全文 encoding = UTF-8 为 encoding = GBK: rest ...