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 相关文章推荐
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
初识Javascript小结
Jul 16 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
js实现图片懒加载效果
Jul 17 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
django富文本编辑器的实现示例
2019/04/10 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
关于python中的xpath解析定位
2020/03/06 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
两道JAVA笔试题
2016/09/14 面试题
语文教学随笔感言
2014/02/18 职场文书
教师考核评语大全
2014/12/31 职场文书
2015年防汛工作总结
2015/05/15 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
python神经网络 使用Keras构建RNN训练
2022/05/04 Python