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模拟按下回车实现代码
Sep 20 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
header跳转和include包含问题详解
2012/09/08 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python二分查找详解
2015/09/13 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python按照多个条件排序的方法
2019/02/08 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python 实现微信自动回复的方法
2020/09/11 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
关于Java String的一道面试题
2013/09/29 面试题
聚美优品励志广告词
2014/03/14 职场文书
电视节目策划方案
2014/05/16 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
创业计划书之校园超市
2019/09/12 职场文书
python pygame入门教程
2021/06/01 Python