jquery获取元素在文档中的位置信息以及滚动条位置(转)
jquery获取元素在文档中的位置信息以及滚动条位置
http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接
获取元素在页面中的位置信息,包括页面的可是区域还有页面滚动条的位置。
元素的位置信息包括:
- 元素的大小 width和height
- 元素的 X轴距离 和 Y轴距离
jQeury提供的方法有:
offset()
获取元素的绝对位置信息position()
获取元素的相对位置信息height()/width()
获取元素的宽高信息,width和height属性值outerWidth()/outerHeight()
获取元素的占有宽高innerWidth()/outerHeight()
获取元素的内容content宽高
获取元素的宽高信息:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>
body{
margin:0px;
padding:0px;
}
#divD{
margin:100px;
padding:20px;
border:1px solid red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="divD"></div>
<script>
$(function(){
var ele = $("#divD");
console.log(ele.height());//300px
console.log(ele.innerHeight());//300+20+20=340px
console.log(ele.outerHeight());//300+20+20+1+1=342px
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
解析:
如图可见
height是元素设置的高度,innnerHeight增加了padding,outerHeight增加了border和padding
width也是同一个道理,包括width=100%
获取元素位置信息
1.offest()
获取元素在可视区域(浏览器显示的窗口区域)的位置信息,left和top
var ele = $("#divD");
console.log(ele.offset());//{top: 110, left: 110}
- 1
- 2
2.position()
相对位置信息
要使得这个函数获取准确的值,注意一下几条
- 父元素必须具有position:absolute/relative/fixed属,如果没有就相对于视口
- 父元素的padding和border会影响获取的值,子元素的margin不会影响获取的值
- top和left属性会影响获取的值
示例1:
<style>
body{
margin:0px;
padding:10px;
}
.parent{
border:1px solid red;
width: 500px;
height:500px;
padding: 10px;
position:relative;
}
.child{
width: 100px;
height: 100px;
border:1px solid red;
position: relative;
top:100px;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
<script>
$(function(){
var ele1 = $(".parent");
var ele2 = $(".child");
console.log(ele1.position().top);
//这个元素的父元素就是body,默认最终相对的元素。padding会影响获取的值,所以最终的结果是10
console.log(ele2.position().top);
//相对的元素是该元素的父元素,100px是top值,10px是padding值,所以最后的结果是110px;
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
示例2:
<style>
body{
margin:0px;
padding:10px;
}
.parent{
border:1px solid red;
width: 500px;
height:500px;
padding: 10px;
/*position:relative; 这个例子与上个例子唯一不同之处*/
}
.child{
width: 100px;
height: 100px;
border:1px solid red;
position: relative;
top:100px;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
<script>
$(function(){
var ele1 = $(".parent");
var ele2 = $(".child");
console.log(ele1.position().top);
//这个元素的父元素就是body,默认最终相对的元素。padding会影响获取的值,所以最终的结果是10
console.log(ele2.position().top);
//该元素的父元素没有满足第一个条件,所以最终相对的元素是body,100px是top值,10px父元素的padding值,另一个值是body的padding,所以最后的结果是120px;
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
所以使用这方法,基本就是配合position使用,就不会出现得不到值或得到的值不对的情况
获取滚动条位置
scrollTop()
获取滚动条位置
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
- 1
- 2
- 3
注意IE浏览器只有在事件(点击,滚动…)中才能获取滚动条对应的值
应用函数
$.fn.extend({
//判断是否在屏幕中
isOnScreen:function(onlyWidth){
//获取元素宽高
var width = $(this).outerWidth();
var height = $(this).outerHeight();
//获取元素在页面中的绝对距离
var top = $(this).offset().top;
var left = $(this).offset().left;
//获取元素滚动条的位置,即视口上(左)边缘距离整个文档最上(左)边缘的位置
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
//获取视口的高度
var screenWidth = $(window).width();
var screenHeight = $(window).height();
// 高度方向判断条件
var heightCondition = (top >= scrollTop) && ((top+height) <= (scrollTop + screenHeight));
// 宽度方向判断条件
var widthCondition = (left >= scrollLeft) && ((left+width) <= (scrollLeft + screenWidth));
//console.log(left +"---"+ scrollLeft +"---"+ width +"---"+ screenWidth);
if(onlyWidth===false){
return heightCondition && widthCondition;
}else{
return heightCondition;
}
},
// 获取元素下边缘到视口的距离
getBottomDistance:function(){
//获取元素宽高
var height = $(this).outerHeight();
//获取元素在页面中的绝对距离
var top = $(this).offset().top;
//获取元素滚动条的位置,即视口上(左)边缘距离整个文档最上(左)边缘的位置
var scrollTop = $(document).scrollTop();
//获取视口的高度
var screenHeight = $(window).height();
return scrollTop + screenHeight - height - top;
}
});
jquery获取元素在文档中的位置信息以及滚动条位置(转)的更多相关文章
- html中如何获取元素在文档中的位置
html中如何获取元素在文档中的位置 一.总结 一句话总结: $("#elem").offset().top $("#elem").offset().left ...
- 使用Java POI来选择提取Word文档中的表格信息
通过使用Java POI来提取Word(1992)文档中的表格信息,其中POI支持不同的ms文档类型,在具体操作中需要注意.本文主要是通过POI来提取微软2003文档中的表格信息,具体code如下(事 ...
- 使用compareDocumentPosition比较两个元素在文档中的位置
PS:尊重原创,转载请注明来自http://www.cnblogs.com/Raoh/p/js_compareDocumentPosition_between_two_node.html 使用comp ...
- 使用pdfFactory隐藏文档中的隐私信息
分享PDF文档时,文档中可能会存在一些隐私信息,比如用户名.用户的邮件地址.电话号码等信息.为了更好地保护原有文档内容的完整性,大家可以在生成PDF时,使用pdfFactory的隐藏信息功能,删除或遮 ...
- 利用Python-docx 读写 Word 文档中的正文、表格、段落、字体等
前言: 前两篇博客介绍了 Python 的 docx 模块对 Word 文档的写操作,这篇博客将介绍如何用 docx 模块读取已有 Word 文档中的信息. 本篇博客主要内容有: 1.获取文档的章节信 ...
- java POI往word文档中指定位置插入表格
1.Service demo import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.a ...
- [转载]JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
在ajax中经常需要对元素的位置进行精确的定位,此时不仅需要获取元素自身的大小位置等属性.还需要知道页面.浏览器.滚动条等的长度和宽度.因为浏览器的兼容问题,如果使用javascript获取这些数值是 ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javaScript获取文档中所有元素节点的个数
HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- Python中的Unicode编码和UTF-8编码
下午看廖雪峰的Python2.7教程,看到 字符串和编码 一节,有一点感受,结合崔庆才的Python博客 ,把这种感受记录下来: ASCII码:是用一个字节(8bit, 0-255)中的127个字母表 ...
- 重置Mac账户密码
前提条件,未开启FileVault. 方法: 开机时按住⌘R进入恢复模式 点菜单命令[实用工具]-[终端] 在终端里输入 resetpassword 回车,或出现重设密码窗口 选中要重设密码的硬盘(如 ...
- eclispe中使用 maven build启动maven项目和打包项目
1.右键项目2.点击run as按钮 3.点击run configurations 4.配置如下: =============================加油加油加油加油加油加油========= ...
- URL格式和urlencode
URL的格式:protocol :// hostname[:port] / path / [;parameters][?query]#fragment URL出现了有+,空格,/,?,%,#,& ...
- syq小姐姐的分享的历年考试经验
一>读题 10~20min浏览题目,把握题目方向和做题大致顺序 不要轻敌,最好先看完题目,大概掌握整套题的难度顺序再动手 仔细读题步骤: (1)文件名(也是检查的重点,绝对重要,注意区分l和1和 ...
- 寻找节点d=n的节点算法
这里的算法是毕设过程中,自己想到的,也不知道有不有人提出过.这里就记录下发现的过程的具体的算法,以后会用到 背景描述 毕设做的是「社交网络中病毒传播的预测」,前期过程主要是模拟几个网络的数据,然后从一 ...
- stl_algo.h
stl_algo.h // Filename: <stl_algo.h> // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: ...
- (转)Linux sort命令
Linux 的 ‘sort’命令的14个有用的范例(一) 2015-5-2 10:29 评论: 3 收藏: 10 编译自:http://www.tecmint.com/sort-command- ...
- (C#)Windows Shell 外壳编程系列2 - 解释,从“桌面”开始展开
(本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一篇:(C#)Windows Shell 外壳编程系列1 - 基础,浏览一个文件夹 让我们详细解释一下 Shell 编程中最基本 ...
- 记一次内存溢出的分析经历——使用thrift
背景: 有一个项目做一个系统,分客户端和服务端,客户端用c++写的,用来收集信息然后传给服务端(客户端的数量还是比较多的,正常的有几千个), 服务端用Java写的(带管理页面),属于RPC模式,中间的 ...