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. 使用Android Studio Gradle实现友盟多渠道打包

    最新项目中要求在友盟后台看到不同渠道的统计,Android大大小小的应用市场要几百个,要一个一个手工打包那一天也干不完,还好是有大牛的,弄出了好多解决方法,就Gradle做一下记录和分享,首先看一些理 ...

  2. 想要薪资20-30K，Python程序员认真敲代码就够了！

    在这个年代,互联网的飞速壮大大家有目共睹,除了表露出的公共受益,其中计算机编程者也是做出了巨大的贡献,即使外国编程语言仍旧属于领导者,但是在互联网的壮大下,我们这是"地球村",国内 ...

  3. oracle 触发器，当一个表更新或插入时将数据同步至另个库中的某个表中

    有两个表分别是 A用户下的 T_SRC_WEATHER_TSPG字段如图, B用户下的t_src_weather 表,如图: 要求,当A用户下的T_SRC_WEATHER_TSPG表有插入或者更新数据 ...

  4. AUTOSAR - 标准文档下载

    官网 https://www.autosar.org/ 文档分类 按功能分 按类型分 CLASSIC PLATFORM The AUTOSAR Classic Platform architectur ...

  5. Flask入门之触发器，事件，数据迁移

    SQLAlchemy Core和SQLAlchemy ORM都具有各种各样的事件挂钩: 核心事件 - 这些在 Core Events中描述,并包括特定于连接池生命周期,SQL语句执行,事务生命周期以及 ...

  6. Math对象中比较常用的计算数学相关的三个方法

    Math类中提供了三个与取整有关的方法:ceil.floor.round,这些方法的作用与它们的英文名称的含义相对应,例如: ceil的英文意义是天花板,该方法就表示向上取整,所以,Math.ceil ...

  7. python_汉塔诺

    '''据说古代有一个梵塔,塔内有三个底座A.B.C,A座上有64个盘子,盘子大小不等,大的在下,小的在上.有一个和尚想把这64个盘子从A座移到C座,但每次只能允许移动一个盘子,在移动盘子的过程中可以利 ...

  8. Spring+Mybatis多数据源的一种实现方式，支持事务

    最近一个项目用到了多个数据库,所以需要实现动态切换数据源来查询数据,http://www.cnblogs.com/lzrabbit/p/3750803.html这篇文章让我受益匪浅,提供了一种自动切换 ...

  9. vue入坑教程（一）

    1.脚手架搭配webpack的安装 (1)需要检查自己的电脑有没有安装node和npm 如果没有安装可以参考官网,以及安装的步骤 官方中文网地址:http://nodejs.cn/ (2)下载webp ...

  10. Creating your own auto-configuration

    44. Creating your own auto-configuration If you work in a company that develops shared libraries, or ...