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 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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中print(),print_r(),echo()的区别详解
2014/12/01 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
大学生求职自我评价
2014/01/16 职场文书
班班通校本培训方案
2014/03/12 职场文书
教师节活动主持词
2014/04/02 职场文书
银行催款通知书
2015/04/17 职场文书
起诉状范本
2015/05/20 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
七年级作文之秋游
2019/10/21 职场文书