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 回调函数中变量作用域的讨论
Sep 11 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
vue实现登录拦截
Jun 29 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
WINXP下apache+php4+mysql
2006/11/25 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
Javascript 中的 && 和 || 使用小结
2010/04/25 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
js实现拖拽效果
2015/02/12 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
共产党员公开承诺书范文
2014/03/28 职场文书
医院信息公开实施方案
2014/05/09 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
明确岗位职责
2015/02/14 职场文书
业务员管理制度范本
2015/08/06 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript