CSS之window的视图属性

时间:2024-03-15 20:01:50

1. innerWidth 属性和innerHeight 属性

innerWidth获取浏览器窗口宽度,注意不带浏览器的边框宽度,但是包括下拉按钮的宽度

CSS之window的视图属性

innerHeight获取浏览器窗口高度,从浏览器底部到工具栏的距离,注意不包括工具栏的高度

CSS之window的视图属性

innerWidth和innerHeight属性只读,没有默认值

2. outerWidth属性和outerHeight属性

outerWidth是浏览器窗口包含浏览器边框的宽度

CSS之window的视图属性

outerHeight是浏览器窗口从浏览器上边框到下边框的高度

CSS之window的视图属性

outerWidth和outerHeight属性只读,没有默认值

3.pageXOffset和pageYOffset

pageXOffset和pageYOffset返回整个页面水平和垂直方向的滚动距离

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置

初始页面:

CSS之window的视图属性

滑动后页面:将上部分内容滑动消失

CSS之window的视图属性

点击按钮查看pageYOffset:

CSS之window的视图属性

4.screenX and screenY

浏览器窗口在显示器中的位置,screenX表示水平位置,screenY表示垂直位置

screenY返回的是浏览器窗口顶部到显示器顶部的距离

screenX返回的是浏览器窗口的左边(从左边框开始)到显示器的右边的距离