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居然支持中文(unicode)编程!
Apr 12 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
js数组的基本使用总结
Jan 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 深入理解strtotime函数的使用详解
2013/05/23 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
JavaScript定时器详解及实例
2013/08/01 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
微信小程序progress组件使用详解
2018/01/31 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
JS实现百度搜索框
2021/02/25 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python批量转换文件编码格式
2015/05/17 Python
Python实现单词翻译功能
2017/06/06 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
干部行政关系介绍信
2014/01/17 职场文书
消防先进事迹材料
2014/02/10 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL