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 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
js函数调用的方式
May 06 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
Vue实现多页签组件
Jan 14 Vue.js
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 str_pad 函数用法简介
2009/07/11 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python实现汉诺塔方法汇总
2016/07/25 Python
python之Socket网络编程详解
2016/09/29 Python
python编写Logistic逻辑回归
2020/12/30 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python中提高pip install速度
2020/02/14 Python
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
商务专员岗位职责
2013/11/23 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
电工工作职责范本
2014/02/22 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
行政助理岗位职责
2015/02/10 职场文书
个人维稳承诺书
2015/05/04 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL