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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 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
php自动获取目录下的模板的代码
2010/08/08 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python实现配置文件备份的方法
2015/07/30 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
python如何编写win程序
2020/06/08 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
护士上岗前培训自我鉴定
2014/04/20 职场文书
安全协议书范本
2014/04/21 职场文书
安全目标管理责任书
2014/07/25 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2015年父亲节寄语
2015/03/23 职场文书
django中websocket的具体使用
2022/01/22 Python
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL