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的键盘控制事件说明
Apr 15 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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 CURL中传递cookie的方法步骤
2019/05/09 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
javascript时区函数介绍
2012/09/14 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
javascript 回调函数详解
2014/11/11 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
微信小程序实现日历小功能
2020/11/18 Javascript
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
函授本科自我鉴定
2014/02/04 职场文书
党员组织关系介绍信
2014/02/13 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
大明湖导游词
2015/02/03 职场文书
考勤制度通知
2015/04/25 职场文书
胡桃夹子观后感
2015/06/11 职场文书