jquery中获得元素尺寸和坐标的方法整理


Posted in Javascript onMay 18, 2014

一、获得坐标

1.offset()

offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。(即视口坐标)

该方法返回的对象包含两个整型属性:top 和 left,以像素计。

此方法只对可见元素有效。

2.position()

position() 方法返回匹配元素相对于父元素的位置(偏移)。(相对于父元素的文档坐标)

该方法返回的对象包含两个整型属性:top 和 left,以像素计。

此方法只对可见元素有效。

3.offsetParent()

offsetParent() 方法返回最近的祖先定位元素。

定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

可以通过 jQuery 设置 position,或者通过 CSS 的 position 属性。

二、获得尺寸

1.width() 和 height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

2.innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

3.outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

Javascript 相关文章推荐
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
Vue实现选择城市功能
May 27 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
Vue实现导出excel表格功能
Mar 30 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
JQuery打造省市下拉框联动效果
May 18 #Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 #Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 #Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 #Javascript
绑定回车enter事件代码
May 18 #Javascript
javascript的alert box在java中如何显示多行
May 18 #Javascript
JSON+HTML实现国家省市联动选择效果
May 18 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
Php+SqlServer实现分页显示
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php header功能的使用
2013/10/28 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
github配置使用指南
2014/11/18 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
买卖协议书范本
2014/04/21 职场文书
春节联欢会策划方案
2014/05/16 职场文书
销售员态度差检讨书
2014/10/26 职场文书
爱的教育观后感
2015/06/17 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis