这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
文章给大家汇总整理了 JavaScript 以及 jQuery 获取元素高宽和位置等信息的方法,非常的全面,小伙伴们可以记录下以便查看
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. 元素的位置偏移量
返回包含 top 和 left 两个属性的对象,相对于 document 文档的坐标。
- offset():
返回包含 top 和 left 两个属性的对象,相对于最近的已定位的包含元素的位置。若无,则相对于 document。只对可见元素有效,注意 ele{visibility:hidden} 也属于可见元素。
- position():
3. 元素的宽高
获得或设置元素【内容】的宽 / 高;若元素的 display:none,其值为 0。
- width()/height():
获得包括内边距(padding)的元素宽度 / 高度,不包括边框;
- innerWidth()/innerHeight():
获得包括内边距 (padding) 和边框 (border) 的元素宽度 / 高度;
- outerWidth()/outerHeight():
获得整个元素的宽度 / 高度,包括外边距、边框、内边距和内容;
- outerWidth(true)/outerHeight(true):
注意:
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> 声明。
来源: http://www.phperz.com/article/17/0603/327278.html