JavaScript获取div的各种高度
时间：04-20来源：作者：点击数：
1、获取div的文档总高度（必须DOM操作）：
var scrollHeight=document.getElementById("inner").scrollHeight;
// jq中没有scrollHeight -只有scrollTop():
// 所以用DOM操作获取元素并计算scrollHeight。
2、获取div的窗口显示高度：
var height=$("#inner").height()
//或
var height=document.getElementById("inner").offsetHeight
3、获取div的卷上去高度：
var scrollTop=$("#inner").scrollTop();
//或
var scrollTop=document.getElementById("inner").scrollTop;
4、三者关系：
scrollHeight >= height + scrollTop
5、获取div距离文档(body)顶部的高度$("#inner").offset().top
6、获取div距离父元素顶部的距离$("#inner").position().top
7、获取div距离窗口(window)顶部的距离("#inner").offset().top - ("body").scrollTop()
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.cdsy.xyz/"/>
<title>城东书院</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#box {
width: 200px;
height: 200px;
background-color: blue;
top: 100px;
left: 100px;
padding: 50px;
position: absolute;
margin-top: 20px;
}
#inner {
width: 100px;
height: 100px;
background-color: red;
}
span {
color: red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*
1、获取div的文档总高度（必须DOM操作）： var scrollHeight=document.getElementById("inner").scrollHeight;
2、获取div的窗口显示高度： var height=$("#inner").height()
3、获取div的卷上去高度： var scrollTop=$("#inner").scrollTop()
4、三者关系：scrollHeight >= height + scrollTop
5、获取div距离文档(body)顶部的高度 $("#inner").offset().top
6、获取div距离父元素顶部的距离 $("#inner").position().top
7、获取div距离窗口(window)顶部的距离 $("#inner").offset().top - $("body").scrollTop()
* */
$(document).ready(function () {
$("#bt").click(function () {
console.log("--div滚动距离------------------------------------");
console.log(document.getElementById("inner").scrollTop);
console.log($("#inner").scrollTop());
console.log("--div文档总高度-------------------------------------");
// There is no scrollHeight in jQuery - it's scrollTop():
// 所以用DOM操作获取元素并计算scrollHeight。
console.log(document.getElementById("inner").scrollHeight);//div总高度
console.log($("#inner").scrollHeight);//jq没此方法
console.log("---div显示高度----------------------------------");
console.log(document.getElementById("inner").offsetHeight);//div显示高度
console.log($("#inner").offsetHeight);//jq没此方法
console.log(document.getElementById("inner").height);//DOM无此操作
console.log($("#inner").height());//div显示高度
/*----------------------------------------------------------------------------------*/
var scrollHeight = document.getElementById("inner").scrollHeight;
$("#zero").text($("#inner").height() + " 窗口卷上去="
+ $("#inner").scrollTop() + " 文档高度" + scrollHeight);
$("#first").text($("#inner").offset().top);//距离文档顶部的高度
$("#second").text($("#inner").position().top);//距离父元素顶部的距离
$("#third").text($("#inner").offset().top - $("body").scrollTop());//距离窗口顶部的距离
$("#forth").text($("body").scrollTop());//body卷上去高度
console.log("--div距离顶部距离-----------------------------------------")
//top:此属性仅仅在对象的定位(position)属性被设置时可用。否则，此属性设置会被忽略。
console.log("blue==="+$("#box").offset().top);//blue距离body顶部距离 = top + margin-top
console.log("blue==="+document.getElementById("box").top);//DOM中无此方法
console.log("blue==="+$("#box").offsetTop);//jq无此方法
console.log("blue==="+document.getElementById("box").offsetTop);
//blue距离body顶部距离 = top + margin-top
})
})
</script>
</head>
<body style="height:1000px;">
A
<div id="box">
Blue
<div id="inner" style="overflow: auto">
<!--ccccccccccccccccccccccccccccccccc-->
offset()方法的定义和用法:
此方法返回或设置所匹配元素相对于document对象的偏移量。
获取匹配元素在当前document的相对偏移。
返回的对象包含两个整型属:top和left。
此方法只对可见元素有效。
<!--ccccccccccccccccccccccccccccccc-->
</div>
</div>
<div style="margin-top:420px;">
红色区域的窗口高度：<span id="zero"></span>
<br>
不存在水平滑动时，窗口window高度 + 窗口window滚上去高度 <= 文档body总高度
<br>
同理，不存在水平滑动时，div的window高度 <= div的window高度 + div的window滚上去高度 <= 文档div的总高度
<br>
存在水平滑动时，div的window高度 <= div的window高度 + div的window滚上去高度 。
<br>
竖直滑到底部时：div的window高度 + div的window滚上去高度= 文档div的总高度+水平滚动条的高度
<br>
<br>
c距离文档body顶部距离(不变):<span id="first"></span>
<br>
c距离父元素b顶部的距离(不变):<span id="second"></span>
<br>
c距离窗口window顶部的距离:<span id="third"></span>
<br>
body卷上去:<span id="forth"></span>
</div>
<input type="button" id="bt" value="点击显示结果">
</body>
</html>
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号