获取div的高度
1、获取div的文档总高度（必须DOM操作）：
var scrollHeight=document.getElementById("inner").scrollHeight;
// jq中没有scrollHeight -只有scrollTop():
// 所以用DOM操作获取元素并计算scrollHeight。
1
2
3
4
2、获取div的窗口显示高度：
var height=$("#inner").height()
//或
var height=document.getElementById("inner").offsetHeight
1
2
3
3、获取div的卷上去高度：
var scrollTop=$("#inner").scrollTop();
//或
var scrollTop=document.getElementById("inner").scrollTop;
1
2
3
4、三者关系：
scrollHeight >= height + scrollTop
1
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="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">
<!--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>
获取div的高度的更多相关文章
- 动态获取div的高度 随着窗口变化而变化
// 1.jq法 <script> var winHeight = $(window).height(); $("#show").css("height&qu ...
- js 获取div 图片高度
使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $("img").css ...
- 从动态获取div高度的问题展开来看
ps 可能篇幅比较长,请大家耐心看看 今天有人在群里问我 动态获取高度怎么获取 我就说jq中的outerHeight. height .innerHeight 原生的height clientH ...
- jQuery获取不到隐藏DIV的高度和宽度
今天做公司订单系统的修改,有同事将订单维护的四个部分拆成了四个小的tab页,由于数据表格时动态加载,所以表格的高度是动态变化的,可不知怎么,先点哪个哪个的高度就正常,其他的都是最小值,这下蒙了,这个找 ...
- JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）
一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与 Margin 的宽度,四个加起来才是 di ...
- 获取可视区域高度赋值给div（解决document.body.clientHeight的返回值为0的问题）
设置html,body{height:100%} 在使用html5文档类型的时候, 设置了html body的高度100%之后,两个浏览器就都能获取document.body.clientHeight ...
- JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
- javascript获取div高度
DOM的: 获得了div的高度值 = document.getElementById("目标id").offsetHeight;
- 用JS来控制 div的高度随浏览器变化而变化
<div id="test" style=" border: solid 1px #f00; "></div> <script t ...
随机推荐
- 白话陈述之——从python脚本变化解析由路径引起的GP服务运行失败问题
补充一下未完待续的利用Python分析GP服务运行结果的输出路径 & 实现服务输出路径的本地化,这篇博客中主要介绍了如何实现将GP服务生成的结果输出至本地及输入输出路径导致GP服务运行失败的问 ...
- Django - Jsonp、CORS
一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...
- Windows:子线程中创建窗口
一般来讲,UI的所有操作都必须在主线程,否则会出现未知错误.但有时候我们会需要一个功能比较单一的窗口,同时希望他在一个单独的线程运行.并不影响主线程的效率. 下面说明一下新建子线程创建的新窗口的方法, ...
- Linux(CentOS)系统下搭建svn服务器
由于GitHub的私有项目需要收费,gitlab对服务器的要求必须是4GB内存以上.对于一些个人的小型项目,想要免费的版本控制工具来管理自己的代码,又不想代码公开,无疑SVN是比较好的选择.windo ...
- python 面向对象编程学习总结
面向对象是个抽象的东西,概念比较多,下面会一一介绍. 一.类和实例 类(Class)和实例(Instance)是面向对象最重要的概念. 类是指抽象出的模板.实例则是根据类创建出来的具体的“对象”,每个 ...
- 26种基于PHP的开源博客系统
26种基于PHP的开源博客系统 来源:本站原创 PHP学习笔记 以下列举的PHP开源Blog系统中,除了我们熟知的WordPress之外,大多都没有使用过,其中一些已经被淘汰,或者有人还在使用.除了做 ...
- Android中解析XML格式数据的方法
XML介绍:Extensible Markup Language,即可扩展标记语言 一.概述 Android中解析XML格式数据大致有三种方法: SAX DOM PULL 二.详解 2.1 SAX S ...
- DLL文件是怎么产生的，DLL文件是什么，DLL文件有什么用
①DLL文件是怎么产生的 许多应用程序被分割成一些相对独立的动态链接库,放置于系统中,就产生了DLL文件. ②DLL文件是什么 DLL(Dynamic Link Library)文件为动态链接库文件, ...
- Jedis连接池
jedis是官方首选的java客户端开发包 Redis不仅是使用命令来操作,现在基本上主流的语言都有客户端支持,比如java.C.C#.C++.php.Node.js.Go等. 在官方网站里列一些Ja ...
- JAVA面试题整理（7）-Redis
Redis面试题汇总 1.Redis用过哪些类型数据,以及Redis底层怎么实现 分析:是不是觉得这个问题很基础,其实我也这么觉得.然而根据面试经验发现,至少百分八十的人答不上这个问题.建议,在项目中 ...