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 相关文章推荐
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
javascript版2048小游戏
Mar 18 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
cache_lite试用
2007/02/14 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php5.3 注意事项说明
2013/07/01 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
js 调用百度分享功能
2017/02/27 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
webpack优化的深入理解
2018/12/10 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
python机器学习之神经网络(三)
2017/12/20 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python实现的knn算法示例
2018/06/14 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python正则表达式学习小例子
2020/03/03 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
高中生学期学习自我评价
2014/02/24 职场文书
五分钟演讲稿
2014/04/30 职场文书
财政局长个人总结
2015/03/04 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书