当前位置：首页 > 资讯 > 技术文档

获取JS中网页各种高宽与位置的方法总结

时间：2022-03-27 03:52 编辑：来源：阅读：
扫一扫，手机访问

摘要：获取JS中网页各种高宽与位置的方法总结

[b]screen对象[/b] [b]获取屏幕的高宽（分辨率）[/b]

screen.width     //屏幕的宽
screen.height    //屏幕的高
screen.availWidth  //屏幕可用宽度  屏幕的像素高度减去系统部件高度之后的值
screen.availHeight  //屏幕可用高度  屏幕的像素宽度减去系统部件宽度之后的值

[b]window对象[/b] [b]获得窗口位置及大小[/b]

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

[b]element对象[/b] 在介绍element对象各种高宽之前有必要解释一下盒模型默认盒模型 [code]box-sizing:content-box;[/code] [img]http://files.jb51.net/file_images/article/201607/2016727111214707.jpg?2016627111227[/img]

boxWidth = 2*margin + 2*border + 2*padding + width
boxHeight = 2*margin + 2*border + 2*padding + height

[b]当不出现滚动条时[/b]

body{margin:0;}
#demo{
  width:100px;
  height:100px;
  padding:10px;
  border:20px;
  margin:30px;
  background-color:red;
}
<div id="demo">123456789 123456789</div>

[b]clientWidth:[/b]在页面上返回内容的可视宽度（不包括边框，边距或滚动条） [b]clientHeight:[/b]在页面上返回内容的可视高度（不包括边框，边距或滚动条）

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

[b]offsetWidth:[/b]返回元素的宽度包括边框和填充，但不包括边距 [b]offsetHeight:[/b]返回元素的高度包括边框和填充，但不包括边距

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

[b]offsetLeft:[/b] 获取对象相对于版面或由 offsetLeft属性指定的父坐标的计算左侧位置 [b]offsetTop: [/b]获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置

console.log(document.getElementById('demo').offsetLeft)  //30
console.log(document.getElementById('demo').offsetTop)  //30

[b][img]http://files.jb51.net/file_images/article/201607/2016727111553788.jpg?201662711168[/img] [/b] [b]当出现滚动条时[/b]

body{
  margin:0;
  padding:20px;
  width:1000px;
  height:500px;
}
<div id="demo">123456789123456789</div>

[b]scrollWidth: [/b]返回元素的整个宽度（包括带滚动条的隐蔽的地方） [b]scrollHeight: [/b]返回整个元素的高度（包括带滚动条的隐蔽的地方）

scrollWidth = 2*padding + width  
console.log(document.body.scrollWidth)  //1040
scrollHeight = 2*padding + width  
console.log(document.body.scrollHeight)  //540

[b]scrollTop: [/b]向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0，其值随着滚动块滚动而变化 [b]scrollLeft: [/b]向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0，其值随着滚动块滚动而变化 [b]event对象[/b] Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 [b]event.pageX:[/b]相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的水平距离（IE8不支持） [b]event.pageY:[/b]相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的垂直距离（IE8不支持） [b]event.clientX:[/b]相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离 [b]event.clientY:[/b]相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离 [b]event.screenX:[/b]相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离 [b]event.screenY:[/b]相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离 [b]event.offsetX:[/b]相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离 [b]event.offsetY:[/b]相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离 [img]http://files.jb51.net/file_images/article/201607/2016727111818098.png?2016627111836[/img] [b]总结[/b] 以上就是获取JS中网页各种高宽与位置的方法总结，对大家学习JS的时候提供了方便，有需要的小伙伴们可以参考学习。

全部评论(0)

上一篇：浅析JavaScript中的同名标识符优先级
下一篇：js 采用delete实现继承示例代码

资讯排行榜
更多>>