JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合


Posted in Javascript onJanuary 12, 2010

因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程。好在JQuery提供了简单优雅,并且兼容的解决方法。
获取浏览器和页面文档的宽度和高度

//获取浏览器显示区域的高度 
$(window).height(); 
//获取浏览器显示区域的宽度 
$(window).width(); //获取页面的文档高度 
$(document.body).height(); 
//获取页面的文档宽度 
$(document.body).width();

获取滚动条的位置
//获取滚动条到顶部的垂直高度 
$(document).scrollTop(); 
//获取滚动条到左边的垂直宽度 
$(document).scrollLeft();

计算位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含top和left两个属性。
offset(options, results)
options.relativeTo

指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll

是否把滚动条计算在内,默认TRUE
options.padding

是否把padding计算在内,默认false
options.margin

是否把margin计算在内,默认true
options.border

是否把边框计算在内,默认true

Javascript 相关文章推荐
JQuery 网站换肤功能实现代码
Nov 02 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
jquery下操作HTML控件的实现代码
Jan 12 #Javascript
jquery插件 cluetip 关键词注释
Jan 12 #Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 #Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 #Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 #Javascript
取选中的radio的值
Jan 11 #Javascript
javascript Object与Function使用
Jan 11 #Javascript
You might like
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
学校联谊活动方案
2014/02/15 职场文书
家长对老师的评语
2014/04/18 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
法制宣传标语
2014/06/23 职场文书
保险公司演讲稿
2014/09/02 职场文书
法定代表人资格证明书
2014/09/11 职场文书
合法的离婚协议书范本
2014/10/23 职场文书