$("#div_id")height();
// 获得的是该div本身的高度, (不包含padding,margin,border)
$("#div_id")outerHeight();
// 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
$("#div_id")outerHeight(true);
// 包含该div本身的高度, 以及padding,border,margin上下的总高度
$(window)height();
// 获取浏览器显示区域（可视区域）的高度
$(window)width();
// 获取页面的文档高度
$(document)height();
// 浏览器当前窗口文档的高度
$(documentbody)width();
// 浏览器当前窗口文档body的高度
$(document)scrollTop();
// 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
objoffset()top
// 某个元素的上边界到body最顶部的距离（在元素的包含元素不含滚动条的情况下）
获取浏览器显示区域的高度 ：
$(window)height();
获取浏览器显示区域的宽度 ：
$(window)width();
获取页面的文档高度 ：
$(document)height();
获取页面的文档宽度 ：
$(document)width();
获取滚动条到顶部的垂直高度 ：
$(document)scrollTop();
获取滚动条到左边的垂直宽度 ：
$(document)scrollLeft();
计算元素位置和偏移量：
$(id)offset();
精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
实现代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
">
if(documentdocumentElement&&documentdocumentElementscrollTop)
{
scrollTop=documentdocumentElementscrollTop;
}
else if(documentbody)
{
scrollTop=documentbodyscrollTop;
}
if(scrollTop>50)
{
documentgetElementById('obj')styleopacity='0';
}
与窗口相关的尺寸有视口宽度clientWidth、浏览器外宽outterWidth、浏览器内宽innerHeight，视口高度clientHeight、浏览器外高outterHeight、浏览器内高innerHeight， 这几个尺寸会因浏览器的不同略有差异。
上述三项测试在Chrome、IE11、Edge、Firefox、Safari 中测试通过。
clientWidth、outterWidth、innerHeight 的值均一致，safari 的 outterWidth 和 outerHeight 均为0。而且 clientWidth、outterWidth、innerHeight 三个值均会随着浏览器地址栏和工具栏的显示或隐藏而发生变化，也就是说浏览器大小、视口是一起发生变化的。
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（含padding）、（可见的）水平滚动条高度、 上边框高度和下边框高度。这个高度可以用来检测元素的可见区域。
offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（含padding）、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。这个高度可以用来检测元素的可见区域。
offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。
clientWidth: 指的是元素内容及其内边距所占据的空间大小，不包含border，滚动条空间不计算在内。
注意：滚动条一般是位于border的内边缘，盖住了padding，但是不占用padding的空间。
scrollHeight: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总高度。
scrollWidth: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总宽度。
scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop: 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
带有垂直滚动条的页面总高度：documentdocumentElementscrollHeight，如果想要获取文档高度，需要找到 scrollHeight 和 clientHeight 中的最大值。
参考文献：
《高级语言程序设计 第三版》
页面
滚动页面的方法有scroll、scrollBy和scrollTo，三个方法都带两个参数：x(X轴上的偏移量)和y(Y轴上的偏移量)。因为是要滚动到页面底部，所以参数x为0，y为页面的滚动高度。另外，页面的滚动高度必须在网页加载完成后才能获取到，所以触发事件用onload。
具体步骤：
方法一：用scroll方法实现。
<body >
<script>
documentwrite(new Array(100)join("<br>"))
</script>
方法二：用scrollBy方法实现。
<body >
<script>
documentwrite(new Array(100)join("<br>"))
</script>
方法三：用scrollTo方法实现。
<body >
<script>
documentwrite(new Array(100)join("<br>"))
</script>
注意：因为页面加载完后默认滚动在最顶端，所以在本例中用scroll、scrollBy和scrollTo方法的效果一样，然而它们之间其实是有区别的。
特别提示
本例三种方法的代码运行后，在页面加载完成后将自动滚动到页面最底端。
特别说明
告诉读者通过该问题的解决过程，需要掌握什么内容或技巧，你能够学到什么，以及其他相关的知识点。
scroll 将窗口滚动到自左上角起指定的 x 和 y 偏移量。
scrollBy 将窗口滚动 x 和 y 偏移量。
scrollTo 将窗口滚动到指定的 x 和 y 偏移量。
以上就是关于jquery—获取元素高度方法 (总结)全部的内容，包括:jquery—获取元素高度方法 (总结)、jquery 如何获取滚动条的宽度、js怎么取得文本框的宽度与高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）