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 相关文章推荐
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
动态加载js、css的实例代码
May 26 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
vue interceptor 使用教程实例详解
Sep 13 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
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
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
Python语言描述最大连续子序列和
2017/12/05 Python
pandas.cut具体使用总结
2019/06/24 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python-for循环的内部机制
2020/06/12 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
化学相关工作求职信
2013/10/02 职场文书
护士的岗位职责
2013/12/04 职场文书
门诊手术室工作制度
2014/01/30 职场文书
探亲邀请信范文
2014/01/30 职场文书
岗位廉政承诺书
2014/03/27 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
先进党支部事迹材料
2014/12/24 职场文书
台风停课通知
2015/04/24 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python