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 相关文章推荐
Backbone.js中的集合详解
Jan 14 Javascript
javascript搜索框效果实现方法
May 14 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
深入了解Vue动态组件和异步组件
Jan 26 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获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
Python中异常重试的解决方案详解
2017/05/05 Python
django celery redis使用具体实践
2019/04/08 Python
增大python字体的方法步骤
2020/07/05 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
Python的信号库Blinker用法详解
2020/12/31 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
专业销售业务员求职信
2013/11/18 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
员工教育培训协议书
2014/09/27 职场文书
水电工岗位职责
2015/02/14 职场文书
部门2015年度工作总结
2015/04/29 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python