js浏览器窗口

Posted 2020-08-24 不再犯错

一。clientwidth和clientheight

注：返回了元素大小，但没有单位，默认单位是 px，如果你强行设置了单位，比如 100em
之类，它还是会返回 px的大小。 (CSS获取的话，是照着你设置的样式获取 ).

对于元素的实际大小， clientWidth和 clientHeight理解方式如下：
1.增加边框，无变化；
2.增加外边距，无变化；
3.增加滚动条，最终值等于原本大小减去滚动条的大小；
4.增加内边距，最终值等于原本大小加上内边距的大小；

注：如果说没有设置任何 CSS的宽和高度， 那么非 IE浏览器会算上滚动条和内边距的
计算后的大小，而 IE浏览器则返回 0

二scrollwidth和scrollheight

注： 返回了元素大小， 默认单位是 px。 如果没有设置任何 CSS的宽和高度， 它会得到
计算后的宽度和高度。
注：对于元素的实际大小， scrollWidth和 scrollHeight理解如下:
1.增加边框，不同浏览器有不同解释：
a) Firefox和 Opera浏览器会增加边框的大小，
b) IE、 Chrome和 Safari浏览器会忽略边框大小，
c) IE浏览器只显示它本来内容的高度，
2.增加内边距， 最终值会等于原本大小加上内边距大小
3.增加滚动条， 最终值会等于原本大小减去滚动条大小
4.增加外边据，无变化。
5.增加内容溢出， Firefox、 Chrome和 IE获取实际内容高度， Opera比前三个浏览
器获取的高度偏小， Safari比前三个浏览器获取的高度偏大

三。offsetwidth和offsetheight

offsetWidth和 offsetHeight
这组属性可以返回元素实际大小，包含边框、内边距和滚动条。

注： 返回了元素大小， 默认单位是 px。 如果没有设置任何 CSS的宽和高度， 他会得到
计算后的宽度和高度。
注：对于元素的实际大小， offsetWidth和 offsetHeight理解如下：
1.增加边框，最终值会等于原本大小加上边框大小；
2.增加内边距，最终值会等于原本大小加上内边距大小；
3.增加外边据，无变化；
4.增加滚动条，无变化，不会减小；
PS：对于元素大小的获取，一般是块级(block)元素并且以设置了 CSS大小的元素较为
方便。 如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦， 所以， 建议使用的时候
注意