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实现心算练习代码
Dec 06 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
Vue Render函数创建DOM节点代码实例
Jul 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP文件操作详解
2016/12/30 PHP
php新建文件的方法实例
2019/09/26 PHP
动态加载iframe
2006/06/16 Javascript
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
摄影助理岗位职责
2014/02/07 职场文书
工作评语大全
2014/04/26 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
大学生党课感想
2015/08/11 职场文书
运动会广播稿200字
2015/08/19 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
java多态注意项小结
2021/10/16 Java/Android