JavaScript与JQUERY获取元素的宽、高和位置


Posted in Javascript onFebruary 26, 2017

javascript中

ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height。几乎所有浏览器都支持该方法。jQuery中没有直接的方法,需要用$(ele).offset().top-$(document).scrollTop()计算得到。

注意:right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

pageYOffset 属性是scrollY属性的别名,设置或返回文档在垂直方向滚动的像素值。window.pageYOffset == window.scrollY;前者浏览器兼容性更好。

所以获取元素在页面文档中的位置:

var X= ele.getBoundingClientRect().left+scrollTop;

var Y =ele.getBoundingClientRect().top+scrollTop;
//在窗口的位置+文档滚动掉的尺寸

为了跨浏览器兼容,文档卷掉的长度请使用如下方式:

varscrollTop= document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

jQuery中

1.鼠标相对于页面的位置

event.pageX/event.pageY:鼠标相对于页面左/上边缘的距离。

2.元素的位置偏移量

offset():返回包含top和left两个属性的对象,相对于document文档的坐标。

position():返回包含top和left两个属性的对象,相对于最近的已定位的包含元素的位置。若无,则相对于document。只对可见元素有效,注意ele{visibility:hidden}也属于可见元素。

3.元素的宽高

width()/height():获得或设置元素【内容】的宽/高;若元素的display:none,其值为0。

innerWidth()/innerHeight():获得包括内边距(padding)的元素宽度/高度,不包括边框;

outerWidth()/outerHeight():获得包括内边距(padding)和边框(border)的元素宽度/高度;

outerWidth(true)/outerHeight(true):获得整个元素的宽度/高度,包括外边距、边框、内边距和内容;

JavaScript与JQUERY获取元素的宽、高和位置

注意:

1)ele.css("height"):返回带有完整单位的字符串(例如400px),若运算需要parseInt转换。ele.height():返回一个没有单位的number数值(例如400)。

2)height()总是返回内容宽度,不管CSS box-sizing属性值。若CSS box-sizing为border-box,将造成这个函数改变这个容器的outerHeight,而不仅是原来的内容高度。

4.浏览器相关宽高

$(window).height():获取浏览器可视窗口的高度;

$(document).height():获取整个网页文档的高度;当网页高度不足浏览器窗口时,返回的是$(window).height()。

$(document).scrollTop():document元素相对document元素对应的滚动条顶部的垂直偏移量,可获取已滚动的距离或设置将要滚动的距离。

即:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。

注意:不建议使用$("html").height()、$("body").height()这样的方法获取高度,原因有:

$("body").height():body可能会有边框,获取的高度会比$(document).height()小;

$("html").height():在不同的浏览器上获取的高度会有差异,浏览器不兼容。

$(window).height()若返回的不是浏览器窗口的高度,可能是网页没有加上<!DOCTYPE>声明。

Javascript 相关文章推荐
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 #Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 #Javascript
JavaScript中Promise的使用详解
Feb 26 #Javascript
setTimeout函数的神奇使用
Feb 26 #Javascript
node.js入门学习之url模块
Feb 25 #Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 #Javascript
从零学习node.js之express入门(六)
Feb 25 #Javascript
You might like
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
Laravel实现表单提交
2017/05/07 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
不安全的常用的js写法
2009/09/15 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
使用python实现个性化词云的方法
2017/06/16 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
劳动模范事迹材料
2014/01/19 职场文书
小学教师师德反思
2014/02/03 职场文书
会计核算科岗位职责
2014/03/19 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
Java 多态分析
2022/04/26 Java/Android