使用JS获取元素、浏览器以及屏幕宽高等属性的方法详解

web前端开发 js|js 前端模板开发|网站前端开发
浏览器
window.screenTop:浏览器左上角距离屏幕顶端的距离
window.screenLeft:浏览器左上角距离屏幕左边的距离
window.innerHeight:浏览器内部可用高度,包括横向滚动条的高度
window.innerWidth:浏览器内部可用宽度,包括纵向滚动条的宽度
window.outerHeight:浏览器整体高度
window.outerWidth:浏览器整体宽度
window.pageYOffset:浏览器内容向上滚动的像素大小
window.pageXOffset:浏览器内容向右滚动的像素大小
window.scrollY:浏览器内容向上滚动的像素大小
window.scrollX:浏览器内容向右滚动的像素大小
屏幕
window.screen.height:屏幕分辨率的高
window.screen.width:屏幕分辨率的宽
window.screen.availHeight:屏幕可用工作区的高
window.screen.availWidth:屏幕可用工作区的宽
元素
document.body.clientWidth:BODY对象宽度
document.body.clientHeight:BODY对象高度
document.body.offsetWidth:网页可见区域宽(包括边线的宽)
document.body.offsetHeight:网页可见区域高(包括边线的高)
document.body.scrollWidth:网页正文全文宽
document.body.scrollHeight:网页正文全文高
document.body.scrollTop:网页被卷去的高
document.body.scrollLeft:网页被卷去的左宽
document.documentElement.clientHeight:元素可见区域高度
document.documentElement.clientWidth:元素可见区域宽度
document.documentElement.scrollTop:元素垂直方向滚动的值
document.documentElement.scrollLeft:元素水平方向滚动的值
document.documentElement.scrollHeight:元素正文全文高
document.documentElement.scrollWidth:元素正文全文宽
document.documentElement.offsetTop:元素左上角距离直接父元素的高度
document.documentElement.offsetLeft:元素左上角距离直接父元素的宽度
document.documentElement.offsetHeight:元素的可见高度
document.documentElement.offsetWidth:元素的可见宽度
鼠标事件
event.pageX:事件发生时,鼠标指针相对于整个文档(包含滚动)的水平座标,没有发生滚动时,其值等于clientX
event.pageY:事件发生时,鼠标指针相对于整个文档视口的垂直座标,没有发生滚动时,其值等于clientY
event.clientX:事件发生时,鼠标指针相对于视口的水平座标
event.clientY:事件发生时,鼠标指针相对于视口的垂直座标
event.screenX:事件被触发时,鼠标指针相对于整个电脑屏幕的水平坐标
event.screenY:事件被触发时,鼠标指针相对于整个电脑屏幕的垂直坐标
event.offsetX:事件被触发时,鼠标指针相对于最近的容器元素的水平坐标
event.offsetY:事件被触发时,鼠标指针相对于最近的容器元素的垂直坐标
如发现错误,请在下方评论区补充,谢谢
web前端开发js语法|web前端js开发案例|前端开发者
» 本文来自:前端开发者 » 《使用JS获取元素、浏览器以及屏幕宽高等属性的方法详解》
» 本文链接地址:https://www.rokub.com/3561.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!