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 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
layui实现三级导航菜单
Jul 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
sphinx增量索引的一个问题
2011/06/14 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
用Python实现KNN分类算法
2017/12/22 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
部队万能检讨书
2014/02/20 职场文书
社区工作感言
2014/02/21 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
中学生操行评语大全
2014/04/24 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang