html获取屏幕、浏览器、页面的高度与宽度
一个页面的展示,从外到内的容器为:屏幕、浏览器以及页面本身;对应关系如下:HTML元素–>页面–>浏览器–>屏幕一、屏幕screen.height //屏幕高度screen.width //屏幕宽度screen.availHeight //屏幕可用高度,即屏幕宽度减去上下任务栏后的高度screen.availWidth //屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度scree
·
一个页面的展示,从外到内的容器为:屏幕
、浏览器
以及页面本身
;对应关系如下:
HTML元素–>页面–>浏览器–>屏幕
一、屏幕
screen.height //屏幕高度
screen.width //屏幕宽度
screen.availHeight //屏幕可用高度,即屏幕宽度减去上下任务栏后的高度
screen.availWidth //屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度
screen.height - screen.availHeight //任务栏高度
二、浏览器
window.outerHeight //浏览器高度
window.outerWidth //浏览器宽度
window.innerHeight //浏览器内页面可用高度;此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度
window.innerWidth //浏览器内页面可用宽度;此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。
window.outerHeight - window.innerHeight //工具栏高/宽度,包含了地址栏、书签栏、浏览器边框等范围
三、页面信息
body.offsetHeight // body总高度
body.offsetWidth // body总宽度
body.clientHeight // body展示的高度;表示body在浏览器内显示的区域高度
body.clientWidth // body展示的宽度;表示body在浏览器内显示的区域宽度
window.innerHeight - body.clientHeight // 滚动条高度/宽度
更多推荐
已为社区贡献3条内容
所有评论(0)