理清window和document的区别以及两者的宽高

一、window和document的区别是什么?

  • window
    1.window对象表示浏览器中打开的窗口。
    2.window对象可以省略,如:
    alert() 等价于 window.alert()
  • document
    1.document对象是window对象的一部分。如:
    document.body 等价于 window.document.body
    2.浏览器的html文档成为document对象。

二、window.location和document.location一样吗?

  • window对象的location属性引用的是location对象,表示该窗口中当前显示文档的URL。
  • document对象的location属性也是引用了location对象。
  • 因此
    window.location === document.location //true
    location.herf === window.location.href === document.location.href

三、与window相关的宽高(不考虑window.document的情况下)

  1. window.innerWidth(打开窗口的内部宽度)与window.outerWidth(打开窗口的外部宽度)


    两者在此表示一样的值
  2. window.innerHeight(打开窗口的内部高度)与window.outerHeight(打开窗口的外部高度)


    window的内高与外高

    3.window.screen包含有关用户屏幕的信息

  • window.screen.height(整个屏幕的高。。固定值)
  • window.screen.width(整个屏幕的宽。。固定值)
  • window.screen.availHeight(可利用的高,即不包括浏览器Google属性栏。。固定值)
  • window.screen.availWidth(可利用的宽,与window.screen.width是一样的。。固定值)
  • window.screenTop(浏览器顶部距屏幕顶部的距离。。随浏览器的缩放以及位置决定)
  • window.screenLeft(浏览器左侧距屏幕左侧的距离。。随浏览器的缩放以及位置决定)
window.screen.height与window.screen.availHeight

四、与document相关的宽高(以document.body为例)

1. 与client相关的宽高
  • document.body.clientWidth
  • document.body.clientHeight
  • document.body.clientTop
  • document.body.clientLeft

clientWidth与clientHeight
1> 该属性指的是元素的可视部分宽度和高度,即padding + content。
2> 如果没有滚动条,即为元素设定的高度和宽度。
3> 如果出现滚动条,那么滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高。(注意:mac系统下滚动轴不占宽度)
总结:
假如无padding无滚动:clientWidth = style.width
假如有padding无滚动:clientWidth = style.width + style.padding*2 
假如有padding有滚动,并且滚动轴是显示的:clientWidth = style.width+style.padding*2 - 滚动轴宽度

clientTop和clientLeft
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素,它的值就是0.
总结:
这一对属性是用来读取元素的border的宽度和高度的。
clientTop = border-top的border-width(边框像素)
clientLeft = border-left的border-widrh(边框像素)

2. 与offset相关的宽高
  • document.body.offsetWidth
  • document.body.offsetHeight
  • document.body.offsetTop
  • document.body.offsetLeft

offsetWidth与offsetHeight
1> 这一对属性指的是元素的border + padding + content的宽度和高度。
2> 该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关。
总结:
假如无padding 无滚动 无border:offsetWidth = clientWidth = style.width
假如有padding 无滚动 有border:offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth + (border-width)·2
假如有padding 有滚动 有border:offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth +滚动轴宽度 + (border-width)·2

offsetLeft与offsetTop

  • 首先先要了解offsetParent这个属性:

1> 如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
2> 如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。

  • 这两个属性对于浏览器的兼容问题:
兼容性

对照上面的公式,下面的例子可帮助深入理解:


3. 与scroll相关的宽高
  • document.body.scrollWidth
  • document.body.scrollHeight
  • document.body.scrollTop
  • document.body.scrolleft

scrollWidth 与 scrollHeight
注意:document.body的scrollWidth和scrollHeight 与 div中scrollWidth和scrollHeight是有点区别的。
<1> document.body的scrollWidth和scrollHeight

  • 给定宽高小于浏览器窗口
    1.scrollWidth通常是浏览器窗口的宽度
    2.scrollHeight通常是浏览器窗口的高度
  • 给定宽高大于浏览器窗口,且内容小于给定宽高(有border需乘2)
    1.scrollWidth:给定的宽度 + 其所有的padding、margin和border
    2.scrollHeight:给定的高度 +其所有的padding、margin和border
  • 给定宽高大于浏览器窗口,且内容大于给定宽高(给定宽高有border不需乘2)
    1.scrollWidth:内容宽度 + 其所有的padding、margin和border
    2.scrollHeight:内容高度 + 其所有的padding、margin和border

<2> div的scrollWidth和scrollHeight

  • 无滚动轴的情况
    scrollWidth = clientWidth = style.width + style.padding · 2
  • 有滚动轴时
    scrollWidth = 实际内容的宽度 + padding · 2
    scrollHeight = 实际内容的高度 + padding · 2

scrollLeft 和 scrollTop(以div为例)
这对属性是可读写的,指的是当元素其中的内容超出其宽高的时候,元素被卷起的宽度和高度。默认都为0 。若改写的话也是可以的改变的。

推荐阅读更多精彩内容