今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。
先贴一下基础代码：
<head>
<style>
#myDiv {
height: 300px;
width: 300px;
margin: 18px auto;
padding: 15px;
border: 5px solid #dddddd;
}
</style>
</head>
<body>
<div id="myDiv">
</div>
<script>
var div = document.getElementById("myDiv");
console.log(div.getBoundingClientRect());
</script>
JavaScript中：
获取坐标
getBoundingClientRect() ：获取元素相对于浏览器视口的的坐标，返回一个Object对象，有6个属性：top | left | right | bottom | width | height。几乎所有浏览器都支持该方法。
注意：right 是指元素右边界距窗口最左边的距离，bottom 是指元素下边界距窗口最上面的距离。
举例：
console.log(div.getBoundingClientRect());
控制台打印结果：
可视宽高
clientHeight ：元素的可视高度（包括内边距，不包括边框、外边距或滚动条）
clientWidth ：元素的可视宽度（包括内边距，不包括边框、外边距或滚动条）
自身宽高
offsetHeight ：元素的高度（包括边框和内边距，不包括外边距）
offsetWidth ：元素的宽度（包括边框和内边距，不包括外边距）
偏移值
offsetLeft ：元素的相对水平偏移位置（左边界距离可视区域最左侧的距离）
offsetParent ：元素的偏移容器（父元素）
offsetTop ：元素的相对垂直偏移位置（上边界距离可视区域最上边的距离）
事迹宽高
scrollHeight ：整个元素的高度（包括带滚动条的隐蔽的地方）
scrollWidth ：元素的整个宽度（包括带滚动条的隐蔽的地方）
鼠标滚动距离
scrollLeft ：是该元素的显示（可见）的内容上边与该元素实际的内容的距离（滚动条滚去的宽度）
scrollTop ：是该元素的显示（可见）的内容与该元素实际的内容的距离（滚动条滚去的高度）
jQuery中：
鼠标相对于页面的位置
event.pageX ：鼠标相对于页面左边缘的距离。
event.pageY ：鼠标相对于页面上边缘的距离。
元素的位置偏移量
offset() ：返回包含 top 和 left 两个属性的对象，相对于 document 文档的坐标。
position()：返回包含top和left两个属性的对象，相对于最近的已定位的包含元素的位置。若无，则相对于document。只对可见元素有效，注意ele{visibility：hidden}也属于可见元素。
元素的宽高
width() ：获得或设置元素【内容】的宽；若元素的display：none，其值为0
height() ：获得或设置元素【内容】的高；若元素的display：none，其值为0
innerWidth() ：获得包括内边距（padding）的元素宽度，不包括边框
innerHeight() ：获得包括内边距（padding）的元素高度，不包括边框
outerWidth() ：获得包括内边距(padding)和边框(border)的元素宽度
outerHeight() ：获得包括内边距(padding)和边框(border)的元素宽度
outerWidth(true) ：获得整个元素的宽度，包括外边距、边框、内边距和内容
outerHeight(true) ：获得整个元素的高度，包括外边距、边框、内边距和内容
注意：
1）ele.css("height") ：返回带有完整单位的字符串（例如400px），若运算需要parseInt转换。ele.height() ：返回一个没有单位的number数值（例如400）。
2）height() 总是返回内容宽度，不管CSS box-sizing 属性值。若CSS box-sizing 为 border-box，将造成这个函数改变这个容器的 outerHeight ，而不仅是原来的内容高度。
浏览器相关宽高
$(window).height() ：获取浏览器可视窗口的高度；
$(document).height() ：获取整个网页文档的高度；当网页高度不足浏览器窗口时，返回的是 $(window).height()。
$(document).scrollTop() ：document 元素相对 document 元素对应的滚动条顶部的垂直偏移量，可获取已滚动的距离或设置将要滚动的距离。
即：当网页滚动条拉到最低端时：
$(document).height() == $(window).height() + $(window).scrollTop()
注意：不建议使用 $("html").height() 、 $("body").height() 这样的方法获取高度，原因有：
$("body").height() ：body可能会有边框，获取的高度会比 $(document).height() 小；
$("html").height() ：在不同的浏览器上获取的高度会有差异，浏览器不兼容。
$(window).height() ：若返回的不是浏览器窗口的高度，可能是网页没有加上 <!DOCTYPE> 声明。
未经允许不得转载：w3h5 » JavaScript与jQuery获取元素的宽、高和位置
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/150247.html