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之典型高阶函数应用介绍二
Jan 10 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
vue时间格式化实例代码
Jun 13 Javascript
express框架下使用session的方法
Jul 31 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 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
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
可实现多表单提交的javascript函数
2007/08/01 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python根据路径导入模块的方法
2014/09/30 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python制作数据导入导出工具
2015/07/31 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
部门活动策划方案
2014/08/16 职场文书
工程服务质量承诺书
2015/04/29 职场文书
小学科学课教学反思
2016/02/23 职场文书
导游词之山海关
2019/12/10 职场文书