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对象的函数
Dec 22 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
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语法速查表
2006/12/06 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python简单日志处理类分享
2015/02/14 Python
python reduce 函数使用详解
2017/12/05 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python学生管理系统开发
2019/01/30 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python同时处理多个异常的方法
2020/07/28 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
网上卖盒饭创业计划书
2014/01/26 职场文书
2014年路政工作总结
2014/12/10 职场文书
安全教育的主题班会
2015/08/13 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android