js中各种的宽度高度（width，height）的总结

这次发表的是JS获取元素各种宽高的细节分析

https://www.imooc.com/learn/608

是对慕课网中的这节课的总结与手记，和一些不同的见解，加上自己理解后，进行了实践，之后编写了这篇文章

1.window的宽高

innerWidth    :    浏览器的内部宽度

innerHeight    ： 浏览器的内部高度

outerWidth    ：浏览器的外部宽度

outerHeight    ：浏览器的外部高度

这四个属性存在兼容性问题：支持IE9+，及其他主流浏览器（以上四个得到的结果无px单位）

具体的innerHeight和outerHeight效果如下图所示：

innerWidth和outerWidth的效果如下图所示：（innerWidth和outerWidth相等）

window.screen      (这个对象包含用户屏幕的相关信息，得到的结果无px单位)

screen.height    ：    屏幕高度

screen.width    ：    屏幕宽度

screen.availHeight    ：    可利用的高度

screen.availWidth    ：    可利用的宽度

window.screenTop    ：    浏览器距离屏幕最顶部的距离

window.screenLeft    ：    浏览器距离屏幕最左边的距离

 

screen.height和screen.availHeight的效果如下图所示（为了更好的展示availHeight的效果，在此我将window的任务栏调制mac系统电脑的相同位置）

screen.width、screen.availWidth、screenTop、screenLeft的效果如下图所示

2.document

client系列（得到的结果无px单位）

document.body.clientWidth

        分为三种情况而定：

        第一种是没有padding和没有滚动条的状态下    ：clinetWidth就等于它本身style样式的宽度值

        第二种是有padding没有滚动条的状态下    ：clientWidth就等于它本身的css样式宽度加上2倍的padding宽度

        第三种是有padding也有滚动条的状态下    ：第二种状态下的clientWidth的值减去滚动条的宽度

document.body.clientHeight   : 同clientWidth的计算方法一样

document.body.clientLeft    :    clientLeft指的是该元素的border-left的border-width（如果没指定border则为0）

document.body.clientTop    :    clientTop指的是该元素的border-top的border-width（如果没指定border则为0）

效果图如下俩附图所示。

 

offset系列

document.body.offsetWidth

        分为三种情况而定：

        第一种是无padding、无滚动条、无border    ：offsetWidth的值等于clientWidth，也等于该元素的本身style的宽度值

        第二种是有padding、无滚动条、有border    :offsetWidth的值等于本身style的宽度值，加上二倍的padding的值，加上二倍的border的值

        第三种是有padding、有滚动条、有border    ：和第二种方式的结果一样

document.body.offsetHeight    ：同offset的计算方式一样

document.body.offsetLeft    ：(这个属性的计算方式存在兼容性问题，该属性的计算和offsetParent有着密切的关系)

        ①.    如果当前元素的父级元素没有进行CSS定位，offsetParent为body

        ②.    如果当前元素的父级元素中css进行定位了，offsetParent就取最近的父级元素

        不同浏览器的offsetLeft的计算方式：

            IE6/7    ：offsetParent的padding-left加上当前元素的margin-left

            IE8/9/10+、Chrome    ：offsetParent的margin-left、border-width、padding-left相加，再加上当前元素的margin-left

            FireFox    :offsetParent的margin-left、padding-left相加，再加上当前元素的margin-left（不加上offset的border-width）

document.body.offsetTop    ：计算方式和offsetLeft相同

scroll系列

document.body.scrollWidth 全部可视的宽度

document.body.scrollHeight    全部可视的高度

        情况一 : body元素的style中width和height设置的值分别小于浏览器的窗口（这里指显示网页的区域，不包括浏览器菜单和书签）

                scrollWidth的值通常等于浏览器窗口的宽度

                scrollHeight的值通常等于浏览器窗口的高度

        情况二 ：给定宽度大于浏览器的窗口，且内容小于给定宽高

                scrollWidth的值等于该元素给定的宽度加上其本身的2*padding、2*margin、2*border

                scrollHeight的值等于该元素给定的高度加上其本身的2*padding、2*margin、2*border

        情况三 :   给定宽度大于浏览器窗口，且内容大于给定宽度

                scrollWidth的值等于内容宽度加上其所有的2*padding、2*margin、2*border

                scrollHeight的值等于内容高度加上其所有的2*padding、2*margin、2*border

这里注意了（以上三种情况是根据资料查询所得，但是根据我亲身时间所得）测试时间为2018.11月 测试的浏览器为（chrome，IE9+）

         情况一 ：当该元素中内容的宽高小于该元素的宽高时

                scrollWidth的值等于该元素的width加上body的2*padding

                scrollHeight的值等于该元素的height加上body的2*padding

        情况二  ：当该元素中的内容宽高大于该元素的宽高时

                scrollWdith的值等于其内容的width加上其内容2*padding、2*margin、2*border，最后再加上body的padding

                scrollHeight的值等于其内容的height加上其内容2*padding、2*margin、2*border，最后再加上body的padding

document.body.scrollLeft (document.documentElement.scrollLeft) 被卷起的宽度（这个属性可读写）

document.body.scrollTop(document.documentElement.scrollLeft)    被卷起的高度（这个属性可读写）

documentElement和body的

        body是documentElement的子节点

                

      

nodeType的知识补充

            元素节点：nodeType=1

            属性节点：nodeType=2

            文本节点：nodeType=3

            注释节点：nodeType=8

            文档节点：nodeType=9