当前位置：首页 - 编程技术 - 文章正文

获取div的高度

2023-06-18 xiaoqihv

1、获取div的文档总高度（必须DOM操作）：

var scrollHeight=document.getElementById("inner").scrollHeight;

// jq中没有scrollHeight -只有scrollTop():// 所以用DOM操作获取元素并计算scrollHeight。12342、获取div的窗口显示高度：

var height=$("#inner").height()//或var height=document.getElementById("inner").offsetHeight1233、获取div的卷上去高度：

var scrollTop=$("#inner").scrollTop();//或var scrollTop=document.getElementById("inner").scrollTop;1234、三者关系：

scrollHeight >= height + scrollTop15、获取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="http://www.softwhy.com/"/> <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">  offset()方法的定义和用法: 此方法返回或设置所匹配元素相对于document对象的偏移量。获取匹配元素在当前document的相对偏移。返回的对象包含两个整型属:top和left。此方法只对可见元素有效。  </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>

转载于:https://www.cnblogs.com/lan-cheng/p/9773883.html

文章地址：https://wenmayi.cn/post/540.html

文蚂蚁博客

@：一个关注互联网技术的个人技术博客

获取div的高度

2023-06-18 xiaoqihv