js中一些关于尺寸和位置的东西

原生
offset

offsetWidth和offsetHeight

怎么获取元素占据的空间大小 width + padding + border
css(div,'width');只能获取元素的宽度(不包含padding、border)
元素.offsetWidth 元素占据的宽度 width + padding + border
元素.offsetHeight 元素占据的高度 height + padding + border


offsetLeft、offsetTop、offsetParent

1、offsetLeft 元素相对于第一个使用定位元素的左边的距离

2、offsetTop 元素相对于第一个使用定位元素的上边距离

3、offsetParent 第一个使用定位的父级元素(如果没有就是body)


当有滚动条时:
var sTop = document.documentElement.scrollTop||document.body.scrollTop
获取滑动的高度
var cHeight = document.documentElement.clientHeight||document.body.clientHeight;
获取显示高度


事件对象
offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY

offsetX、offsetY:
鼠标相对于事件源元素(srcElement)的X,Y坐标
clientX、clientY:
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。
pageX、pagey:
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了
广泛支持。IE事件中没有这2个属性
screenX、screenY:
鼠标相对于用户显示器屏幕左上角的X,Y坐标。

jquery:

height 取得匹配元素当前计算的高度值(px)。
$("p").height();

width 取得第一个匹配元素当前计算的宽度值(px)。
$("p").width();

innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
$("p").innerHeight();

innerWidth() 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
$("p").innerWidth();

outerHeight() 获取第一个匹配元素外部高度(默认包括补白和边框)。
$("p").outerHeight();

outerWidth() 获取第一个匹配元素外部宽度(默认包括补白和边框)。
$("p").outerWidth();


offset 获取匹配元素在当前文档的相对偏移。
$("#box").offset().left;
$("#box").offset().top;

position 获取匹配元素相对父元素的偏移。(有定位时)
$("#box").position().left;
$("#box").position().top;

scrollTop 获取匹配元素相对滚动条顶部的偏移。
$("p").scrollTop();

scrollLeft 获取匹配元素相对滚动条左侧的偏移。
$("p").scrollLeft();

原文地址:https://www.cnblogs.com/liyi-wutong/p/7646166.html