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实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
详解vue中组件参数
Jul 09 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 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
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python匿名函数的使用方法解析
2019/10/10 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
七一党建活动方案
2014/01/28 职场文书
辩论赛主持词
2014/03/18 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
高三语文教学反思
2016/02/16 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python