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 相关文章推荐
在js中使用"with"语句中跨frame的变量引用问题
Mar 08 Javascript
jquery 选择器部分整理
Oct 28 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
JavaScript阻止事件冒泡的方法
Dec 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环境中Memcache的安装和使用
2015/11/05 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
如何实现JS函数的重载
2006/09/22 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python根据多个文件名批量查找文件
2019/08/13 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python实现交并比IOU教程
2020/04/16 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
工作说明书格式
2014/07/29 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
婚前协议书范本
2014/10/27 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫