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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
JS实现手风琴特效
Nov 08 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
php正则校验用户名介绍
2008/07/19 PHP
php 过滤危险html代码
2009/06/29 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
Python常见数据结构详解
2014/07/24 Python
python中尾递归用法实例详解
2015/04/28 Python
python如何对实例属性进行类型检查
2018/03/20 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
高中自我鉴定
2013/12/20 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
Nginx限流和黑名单配置
2022/05/20 Servers