1、window的各种宽高   outerWidth、innerWidth、outerHeight、innerHeight

outerHeight 获取浏览器窗口外部的高度（单位：像素）。表示整个浏览器窗口的高度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调整窗口大小的边框（window resizing borders/handles）

innerHeight 浏览器视口的高度（单位：像素），如果存在水平滚动条则包括它

outerWidth 获取浏览器窗口外部的宽度（单位：像素）。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调整窗口大小的边框（window resizing borders/handles）

innerWidth 浏览器视口的宽度（单位：像素），如果存在垂直滚动条则包括它

下图中可以看到，outerWidth 和 outerHeight 不仅包含浏览器窗口的宽高，还包括窗口镶边

下图中可以看到，innerWidth和innerHeight，所谓的视口宽高不仅包含内容还包括padding

以上四个属性仅适用于 IE9+，对于老IE 则需注意两点：

（1）、IE8及以下不支持 outerWidth 和 outerHeight，且没有提供替代的属性

（2）、针对 innerWidth 和 innerHeight，可以用过 document.documentElement.clientWidth/Height (标准模式) 和 document.body.clientWidth/Height (混杂模式) 替代

下图中可以看到IE8 不支持以上四个属性：

IE8及以下针对 innerWidth 和 innerHeight 的兼容性写法：

var innerWidth = window.innerWidth,

     innerHeight = window.innerHeight;

if(typeof innerWidth !== 'number') {

      if (document.compatMode == "CSS1Compat") { // 当前文档渲染模式是 “标准模式”

        innerWidth = document.documentElement.clientWidth

        innerHeight = document.documentElement.clientHeight

      } else{ // 当前文档渲染模式是 “混杂模式”

        innerWidth = document.body.clientWidth

        innerHeight = document.body.clientHeight

      }

}

console.log('innerWidth: ' + innerWidth)

console.log('innerHeight: ' + innerHeight)

以下两组属性，声明了窗口的左上角在屏幕上的 x 坐标 和 y 坐标，都不存在兼容性问题

screenLeft /  screenTop  适用于 IE、Safari 和 Opera

screenX / screenY          适用于 Firefox 和 Safari

下图分别测试在IE9，IE8，IE7 下的输出结果

2、window.screen 对象表示一个屏幕，包含用户屏幕的信息

通过控制台输出可以看到，screen对象共包含6个宽高属性 width、height、availWidth、availHeight

width      返回显示器屏幕的宽度（单位：像素）

height     返回显示器屏幕的高度（单位：像素）

availWidth   返回显示屏幕的可用宽度，除 windows 任务栏之外（单位：像素）

availHeight  返回显示屏幕的可用高度，除 windows 任务栏之外（单位：像素）

3、document 相关的宽高

（1）、clientWidth 和 clientHeight ( 均被四舍五入为一个整数，如果需要小数，可以使用 element.getBoundingClientRect() )

　　　　clientWidth  属性表示元素的内部宽度（单位：像素）。包括内边距，但不包括垂直滚动条（如果有），边框和外边距

　　　　可以通过 css width + css padding - 垂直滚动条宽度（如果有）来计算

　　　　clientHeight 属性是只读的，对于没有定义css或者内联布局盒子的元素为0，否则，它是元素内部的高度（单位：像素）。包括内边距，但不包括水平滚动条（如果有），边框和外边距

　　　　可以通过 css height + css padding - 水平滚动条高度（如果有）来计算

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .box{width: 200px; height: 100px; padding: 15px; background-color:blanchedalmond; border: 2px solid red; overflow: auto;}

  </style>

</head>

<body>

  <div class="box" id="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, voluptate. Deleniti commodi, sapiente earum inventore fuga nulla facere quibusdam unde reiciendis perspiciatis voluptate, sint fugiat aspernatur quidem voluptatem voluptatibus rem?</div>

  <script>

    var box = document.getElementById('box')

    console.log('clientWidth: ' + box.clientWidth)    // clientWidth: 213

    console.log('clientHeight: ' + box.clientHeight)  // clientHeight: 130

  </script>

</body>

</html>

通过控制台可以看到 clientWidth 213 = 元素宽度183 + padding 15 * 2，clientHeight 130 = 元素高度100 + padding 15 *2

该属性在 IE8 以下的浏览器中，取值会有些异常

（2）、clientTop 和 clientLeft （可以理解为 border 的宽高）

　　　　clientTop  一个元素顶部边框的宽度（单位：像素），不包括顶部外边距或内边距

　　　　clinetLeft 一个元素左边框的宽度（单位：像素），不包括左内边距和左外边距

　　　　如果元素的文本方向是从右向左，并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度

在上例的基础上，IE7/IE8 都输出同样的值

console.log('clientLeft: ' + box.clientLeft)    // clientLeft: 2

console.log('clientTop: ' + box.clientTop)      // clientTop: 2

（3）、offsetWidth 和 offsetHeight  ( 均被四舍五入为一个整数，如果需要小数，可以使用 element.getBoundingClientRect() )

　　　　offsetWidth   返回一个元素的布局宽度。包括 元素的边框（border）+ 水平线上的内边距（padding）+ 垂直方向滚动条宽度（scrollbar）+ css 设置的宽度（width）

　　　　offsetHeight  返回一个元素的像素高度。包括 元素的边框（border）+ 垂直线上的内边距（padding）+ 水平方向滚动条高度（scrollbar）+ css 设置的高度（height），不包括 :before, :after 等伪元素的宽高

在上例的基础上，IE7/IE8 都输出同样的值

console.log('offsetWidth: ' + box.offsetWidth)     // offsetWidth: 234

console.log('offsetHeight: ' + box.offsetHeight)   // offsetHeight: 134

（4）、offsetParent、offsetLeft 和 offsetTop

　　　　offsetParent  返回一个指向最近的、包含该元素的、定位元素，这里分两种情况

　　　　　　- 当前元素的祖先元素没有定位，offsetParent 最终是body

　　　　　　- 当前元素的祖先元素定位了，offsetParent 取最近的那个祖先元素　

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    *{box-sizing: border-box;}

    .box1{width: 350px; height: 350px; padding: 75px; background-color:bisque;}

    .box2{width: 200px; height: 200px; padding: 50px; background-color:aquamarine;}

    .box3{width: 100px; height: 100px; background-color:aliceblue; position: fixed;}

  </style>

</head>

<body>

  <div class="box1">

    <div class="box2">

      <div class="box3" id = "box3"></div>

    </div>

  </div>

  <script>

    var box = document.getElementById('box3')

    // 父元素 box2 定位

    console.log(box.offsetParent)   // <div class="box2"></div>

    // 父元素 box2 的父元素 box1 定位（box2 没有定位）

    console.log(box.offsetParent)     // <div class="box1"></div>

    // 所有父元素都没有定位

    console.log(box.offsetParent)     // <body></body>

    // 该元素或祖先元素 设为 display: none

    console.log(box.offsetParent)        // webkit, IE11: null, IE10-IE9: <body></body>

    // 该元素的定位方式为fixed（不管祖先元素是否定位）

    console.log(box.offsetParent)        // 所有IE 均返回 null

  </script>

</body>

</html>

　　　　offsetTop  返回当前元素相对于其 offsetParent 元素的顶部的距离

　　　　offsetLeft  返回当前元素左上角相对于其 offsetParent 元素的左边界偏移的距离

// box1 定位

console.log('offsetLeft: ' + box.offsetLeft)     // offsetLeft: 125

console.log('offsetTop: ' + box.offsetTop)       // offsetTop: 125

（5）、scrollWidth 和 scrollHeight

　　　　scrollWidth 返回元素的内容区域宽度 或 元素的本身的宽度中 更大的那个值。若元素的宽度大于其内容区域（如：存在滚动条时），scrollWidth 要大于 clientWidth

　　　　scrollHeight 等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度；若没有垂直滚动条，scrollHeight 与 clientHeight 相同

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .box{width: 100px; height: 150px; margin: 15px; padding: 15px; background-color: lightgreen; overflow: scroll;}

  </style>

</head>

<body>

  <div class="box" id="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat odit molestias hic, fuga cumque repudiandae labore dignissimos itaque sunt, sint incidunt, minima laborum earum non maiores laudantium? Reiciendis, unde fugiat.</div>

  <script>

    var box = document.getElementById('box')

    console.log('clientWidth: ' + box.clientWidth)

    console.log('clientHeight: ' + box.clientHeight)

    console.log('-------------------------------------------')

    console.log('offsetWidth: ' + box.offsetWidth)

    console.log('offsetHeight: ' + box.offsetHeight)

    console.log('-------------------------------------------')

    console.log('scrollWidth: ' + box.scrollWidth)

    console.log('scrollHeight: ' + box.scrollHeight)

  </script>

</body>

</html>

（6）、scrollLeft 和 scrollTop （可读写，可被设置为任何整数值）

　　　　scrollLeft  可以读取或设置元素滚动条到元素左边的距离

　　　　　　- 如果元素不能滚动（如：没有溢出），那么 scrollLeft 的值是0

　　　　　　- 如果给 scrollLeft 设置的值小于 0，那么 scrollLeft 的值将变为0

　　　　　　- 如果给 scrollLeft 设置的值小于元素内容最大的宽度，那么 scrollLeft 的值将被设为元素的最大宽度

　　　　scrollTop 可以获取或设置一个元素的内容垂直滚动的像素数

　　　　　　- 如果元素没有垂直方向的滚动条，那么 scrollTop 的值是0

　　　　　　- 如果 scrollTop 设置的值小于0， 那么 scrollTop的值将变为0

　　　　　　- 如果设置超出了这个容器可滚动的值，scrollTop 会被设置为最大值

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <style>

      #container {

          border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;

      }

      #content {

          background-color: #ccc; width: 250px;

      }

  </style>

  <script>

      document.addEventListener('DOMContentLoaded', function () {

          var button = document.getElementById('slide');

          button.onclick = function () {

              document.getElementById('container').scrollLeft += 20;

          };

      }, false);

  </script>

</head>

<body>

  <div id="container">

      <div id="content">Lorem ipsum dolor sit amet.</div>

  </div>

  <button id="slide" type="button">Slide</button>

</body>

</html>

4、Event 事件对象的坐标

clientX和clientY ----> 相对于浏览器（可视区左上角0,0）的坐标
screenX和screenY ----> 相对于设备屏幕左上角的（0,0）的坐标
offsetX和offsetY ----> 相对于事件源左上角(0,0)的坐标
pageX和pageY 相对于整个网页左上角(0,0)的坐标
X和Y 本是IE属性，相对于用CSS动态定位的最内容包裹元素

JS 各种宽高的更多相关文章

  1. js/jq宽高的理解与运用

    document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...

  2. js各种宽高(1)

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

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

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

  4. js 浏览器 宽高 各种

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度   if (window.innerWidth)   winWidth = window.innerWidth;   else if ((do ...

  5. js常用宽高属性

    document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...

  6. js各种宽高(2)

    在javascript和jquery中,都有对各种高度的写法,在这里,我们就着重讲一下窗口.文档等高度的理解.(宽度和高度差不多!) jquery的各种高度 首先来说一说$(document)和$(w ...

  7. js获取宽高

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  8. js各种宽高(3)

    有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系. JS获取各种宽度.高度的简单介绍: scrollHeig ...

  9. JS/jQuery宽高的理解和应用

    1.widows:窗口.window对象可省略 2.document对象是window对象的一部分 浏览器的Html文档成为Document对象 window.location===document. ...

随机推荐

  1. 如何找某个样式属于哪个Element

    如果找不到样式所在的Element,那么可以参考排除法,逐个删除覆盖在同一位置的元素,如果该样式消失,那么可以判断为这个样式.

  2. window.open打开新窗体并用post方式传参

    function openPostWindow(url,data,name){ //url要跳转到的页面,data要传递的数据,name显示方式(可能任意命名) var tempForm = docu ...

  3. PAT1077: Kuchiguse

    1077. Kuchiguse (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 HOU, Qiming The Japan ...

  4. 如何通俗的理解spring的控制反转、依赖注入、面向切面编程等等

    之前一直不理解spring的一些基础特性是什么意思,虽然网上的解释也很多,但是由于我比较笨,就是看不懂,知道最近才稍微了解,下面就以通俗讲解的方式记录下来. 前言 假设我是一个没有开店经验的小老板,准 ...

  5. MyBatis缓存详解

    MyBatis缓存分为一级缓存和二级缓存 http://www.cnblogs.com/zemliu/archive/2013/08/05/3239014.html mybatis 二级cache h ...

  6. linux下redis数据库的简单使用

    一.redis简介 Redis是一个key-value存储系统.和 Memcached类似,但是解决了断电后数据完全丢失的情况,而且她支持更多无化的value类型,除了和string外,还支持list ...

  7. Tiny4412模式跳转

    ARM体系的CPU有以下7种工作模式: 1.用户模式(Usr):用于正常执行程序: 2.快速中断模式(FIQ):用于高速数据传输: 3.外部中断模式(IRQ):用于通常的中断处理: 4.管理模式(sv ...

  8. eclipse汉化链接

    百度百科 https://jingyan.baidu.com/article/4b07be3cb1864e48b380f315.html 博客园:http://blog.csdn.net/sunny_ ...

  9. mac 上安装 nvm 遇到的坑

    本人之前在 mac 上已经装过 nvm 了,今天帮朋友在他电脑上装,由于是新版本,没想到有点坑. ** 一定要参考官方文档 一.命令行安装  (图片来自 github ) 意思是,无论你安装还是更新 ...

  10. Intent传值的学习

    今天学习了Intent传值的过程,有点安卓编程经验的都知道,Intent可以实现页面的跳转,可以从一个activity跳转到另一个activity,这个名义上说是界面跳转,其实这句话现在觉得说的很不严 ...