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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
javascript event 事件解析
Jan 31 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 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程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
php生成gif动画的方法
2015/11/05 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
python中doctest库实例用法
2020/12/31 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
2014最新自愿离婚协议书范本
2014/11/19 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
致运动员加油稿
2015/07/21 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python