element client

JS中DOM元素获取的宽和⾼的⽅法⼩结

⽹页可见区域宽：Width（可变）

⽹页可见区域⾼：Height（可变）

⽹页可见区域宽：Width(包括边线的宽)

⽹页可见区域⾼：Height(包括边线的⾼)

⽹页正⽂全⽂宽：Width

⽹页正⽂全⽂⾼：Height

⽹页被卷去的⾼：Top

⽹页被卷去的左：Left

对应的dom元素的宽⾼有以下⼏个常⽤的：

元素的实际⾼度：mentById(“div”).offsetHeight

元素的实际宽度：mentById(“div”).offsetWidth

元素的实际距离左边界的距离：mentById(“div”).offsetLeft

元素的实际距离上边界的距离：mentById(“div”).offsetTop

scrollWidth、clientWidth、offsetWidth的区别

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后⽽变⼤。

clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显⽰⼤⼩的变化⽽改变。

offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显⽰⼤⼩的变化⽽改变

情况1：

元素内⽆内容或者内容不超过可视区，滚动不出现或不可⽤的情况下。

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2：

元素的内容超过可视区，滚动条出现和可⽤的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

这⾥⾃⼰总结哒、、、

浏览器的宽和⾼

eight：声明了显⽰浏览器的屏幕的可⽤⾼度，固定值，不包含任务栏

idth):浏览器的屏幕的宽度=width1280固定值

:浏览器屏幕实际⾼

:浏览器屏幕实际宽

ffset:浏览器滚动条的上偏移

ffset):浏览器滚动条的左偏移

说明：

（1）pageXOffset设置或返回当前页⾯相对于窗⼝显⽰区左上⾓的X位置。pageYOffset设置或返回当前页⾯相对于窗⼝显⽰区左上⾓

的Y位置。

（2）pageXOffset和pageYOffset属性相等于scrollX和scrollY属性。

（3）这些属性是只读的。

idth：浏览器可视区域的⾼

eight：浏览器可视区域的宽