获取JS中网页各种高宽与位置的方法总结
2019/6/27 22:14:43
本文主要是介绍获取JS中网页各种高宽与位置的方法总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
screen对象
获取屏幕的高宽(分辨率)
screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值
window对象
获得窗口位置及大小
window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.innerWidth //窗口中可视区域(viewpoint)的宽度 alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366 window.innerHeight //窗口中可视区域(viewpoint)的高度 该值与浏览器是否显示菜单栏等因素有关 alert(window.innerHeight); //chrome 643 ff 657 ie 673 window.outerWidth //浏览器窗口本身的宽度(可视区域宽度+浏览器边框宽度) alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382 //说明chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框 //ff和ie上下左右有8px的边框宽度 window.outerHeight //浏览器窗口本身的高度 alert(window.outerHeight); //chrome 728 ff 744 ie 744
element对象
在介绍element对象各种高宽之前有必要解释一下盒模型
默认盒模型 box-sizing:content-box;
boxWidth = 2*margin + 2*border + 2*padding + width boxHeight = 2*margin + 2*border + 2*padding + height
当不出现滚动条时
body{margin:0;} #demo{ width:100px; height:100px; padding:10px; border:20px; margin:30px; background-color:red; } <div id="demo">123456789 123456789</div>
clientWidth:在页面上返回内容的可视宽度(不包括边框,边距或滚动条)
clientHeight:在页面上返回内容的可视高度(不包括边框,边距或滚动条)
clientWidth = 2*padding + width - scrollbarWidth console.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0 clientHeight = 2*padding + height - scrollbarHeight console.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0
offsetWidth:返回元素的宽度包括边框和填充,但不包括边距
offsetHeight:返回元素的高度包括边框和填充,但不包括边距
offsetWidth = 2*border + 2*padding + width console.log(document.getElementById('demo').offsetWidth) //160 offsetHeight = 2*border + 2*padding + height console.log(document.getElementById('demo').offsetHeight) //160
offsetLeft: 获取对象相对于版面或由 offsetLeft属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置
console.log(document.getElementById('demo').offsetLeft) //30 console.log(document.getElementById('demo').offsetTop) //30
当出现滚动条时
body{ margin:0; padding:20px; width:1000px; height:500px; } <div id="demo">123456789123456789</div>
scrollWidth: 返回元素的整个宽度(包括带滚动条的隐蔽的地方)
scrollHeight: 返回整个元素的高度(包括带滚动条的隐蔽的地方)
scrollWidth = 2*padding + width console.log(document.body.scrollWidth) //1040 scrollHeight = 2*padding + width console.log(document.body.scrollHeight) //540
scrollTop: 向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0,其值随着滚动块滚动而变化
scrollLeft: 向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0,其值随着滚动块滚动而变化
event对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
event.pageX:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的水平距离(IE8不支持)
event.pageY:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的垂直距离(IE8不支持)
event.clientX:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离
event.clientY:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离
event.screenX:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的水平距离
event.screenY:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的垂直距离
event.offsetX:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离
event.offsetY:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离
总结
以上就是获取JS中网页各种高宽与位置的方法总结,对大家学习JS的时候提供了方便,有需要的小伙伴们可以参考学习。
这篇关于获取JS中网页各种高宽与位置的方法总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist