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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
容易被忽略的Python内置类型
2020/09/03 Python
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
EJB的几种类型
2012/08/15 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
2014年服务员工作总结
2014/11/18 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
MySQL触发器的使用
2021/05/24 MySQL
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
Nginx配置根据url参数重定向
2022/04/11 Servers
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL