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 cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
javascript类型转换示例
Apr 29 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
Vue项目环境搭建详细总结
Sep 26 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
基于mysql的bbs设计(三)
2006/10/09 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
js玩一玩WSH吧
2007/02/23 Javascript
js表格分页实现代码
2009/09/18 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
python创建n行m列数组示例
2019/12/02 Python
python中数字是否为可变类型
2020/07/08 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
高中地理教学反思
2014/01/29 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
工作感想范文
2015/08/07 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
linux目录管理方法介绍
2022/06/01 Servers
数据设计之权限的实现
2022/08/05 MySQL