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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
JS中的const命令你真懂它吗
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
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
学习python (1)
2006/10/31 Python
简明 Python 基础学习教程
2007/02/08 Python
Python脚本实现网卡流量监控
2015/02/14 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
手把手教你python实现SVM算法
2017/12/27 Python
python3 读写文件换行符的方法
2018/04/09 Python
Django的models模型的具体使用
2019/07/15 Python
深入解析神经网络从原理到实现
2019/07/26 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
周年庆典邀请函范文
2014/01/24 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
新手初学Java List 接口
2021/07/07 Java/Android