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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
vue.js表格分页示例
Oct 18 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
pycharm 使用心得(五)断点调试
2014/06/06 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Python 高效编程技巧分享
2020/09/10 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
init进程的作用
2015/08/20 面试题
大学生自我评价范文
2015/03/03 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
活动费用申请报告
2015/05/15 职场文书
初中语文教学反思范文
2016/03/03 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
Win11快速关闭所有广告推荐
2022/04/19 数码科技