jquery获取元素在文档中的位置信息以及滚动条位置（转）
jquery获取元素在文档中的位置信息以及滚动条位置
http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接
- 标签：
- jquery /
- 元素位置 /
- DOM文档 /
- 视口
- 57
获取元素在页面中的位置信息，包括页面的可是区域还有页面滚动条的位置。
元素的位置信息包括：
- 元素的大小 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; } });转载于:https://www.cnblogs.com/lianghong/p/8310491.html
jquery获取元素在文档中的位置信息以及滚动条位置（转）相关推荐
- 坐标定位手机元素_CSS 是如何影响浏览器元素在文档中的排列？
之前在项目的过程中遇到了一个问题,某个 div 希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下 CSS 相关资料,解决了这个问 ...
- CSS 如何影响浏览器元素在文档中的排列？
作者 | SHERlocked93责编 | 胡巍巍 之前在项目的过程中遇到了一个问题,某个 div 希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什 ...
- C# 如何获取PPT演示文档中的所有标题
C# 如何获取PPT演示文档中的所有标题 标题是一个PPT演示文档不可或缺的部分,它可以让一个长的PPT演示文档变得有条理性,同时也可以提醒观众演讲者接下来要演示的内容. 在开始前,我们要了解一个概念 ...
- 获取元素在文档上的正确坐标
如何获取元素在页面上的正确坐标呢, 我想很多人都会想到 elem.getBoundingClientRect 和 window.scrollTop / window.scrollLeft 的求和,实 ...
- html文档中怎么区分节点对象节点类型,JavaScript文档对象模型-Element类型
除了Document类型之外,Element类型是JavaScript编程中最常使用的类型.Element类型常用于表现HTML或XML元素,提供对元素标签名.子节点及特性的访问. Element节点 ...
- Word处理控件Aspose.Words功能演示：用Java从Word文档中提取文本
Aspose.Words For .NET是一种高级Word文档处理API,用于执行各种文档管理和操作任务.API支持生成,修改,转换,呈现和打印文档,而无需在跨平台应用程序中直接使用Microsof ...
- python word排版_利用Python-docx 读写 Word 文档中的正文、表格、段落、字体等
前言: 前两篇博客介绍了 Python 的 docx 模块对 Word 文档的写操作,这篇博客将介绍如何用 docx 模块读取已有 Word 文档中的信息. 本篇博客主要内容有: 1.获取文档的章节信 ...
- python word中表格字体设置_利用Python-docx 读写 Word 文档中的正文、表格、段落、字体样式等...
前言: 前两篇博客介绍了 Python 的 docx 模块对 Word 文档的写操作,这篇博客将介绍如何用 docx 模块读取已有 Word 文档中的信息. 本篇博客主要内容有: 1.获取文档的章节信 ...
- python读取word中的文字格式_利用Python-docx 读写 Word 文档中的正文、表格、段落、字体等...
前言: 前两篇博客介绍了 Python 的 docx 模块对 Word 文档的写操作,这篇博客将介绍如何用 docx 模块读取已有 Word 文档中的信息. 本篇博客主要内容有: 1.获取文档的章节信 ...
最新文章
- 5G将如何推动未来十年智能城市的发展
- linux bash 写入文件
- tableau可视化数据分析60讲（七）-工作表操作（长篇干货建议收藏！）
- Anaconda 安装与使用
- 剑指offerpython_《剑指offer》3. 从尾到头打印单链表值【Java+Python】
- android 全局 窗口,miui12全局自由窗口app
- 计算机专业接本应用心理学,专接本接应用心理学但遇到阻挠?
- 逐步解析：杨辉三角（C语言）
- mitmproxy可谓神器乎？
- ios 6.1中 Release问题
- 访问oracle索引需要什么权限,Oracle索引 权限
- 阿里云企业邮箱有免费的吗？如何申请？
- 支持APP的打印服务器,TP-LINK双频无线路由器打印服务器客户端软件
- 【综述】方面级情感分析 Aspect-level Sentiment Classification
- （三十七）java SpringCloud版本b2b2c鸿鹄云商平台全套解决方案
- 程序员的而立之年，迷茫之年
- python支付宝二维码支付源代码
- Windows系统设置多账户步骤
- DNS添加/修改/查询/删除A记录
- 10分钟搞懂蚁群算法