在Web开发中，获取DOM元素的宽度、高度以及滚动位移是常见的需求。以下是如何在原生JavaScript和jQuery中实现这些操作的方法。
原生JavaScript
-
获取元素的宽度和高度：
var width = element.offsetWidth;
var height = element.offsetHeight;
var width = element.clientWidth;
var height = element.clientHeight;
var width = element.scrollWidth;
var height = element.scrollHeight;
- 获取元素的滚动位移：
- 水平滚动位移：
var scrollLeft = element.scrollLeft;
- 垂直滚动位移：
var scrollTop = element.scrollTop;
jQuery
- 获取元素的宽度和高度：
- 当前显示的宽度和高度（与原生的
offsetWidth和offsetHeight类似）：
var width = $(element).width();
var height = $(element).height();
- 内容的宽度和高度（与原生的
clientWidth和clientHeight类似）：
var width = $(element).innerWidth();
var height = $(element).innerHeight();
- 元素本身的宽度和高度（包括滚动条的宽度和高度）：
var width = $(element).outerWidth();
var height = $(element).outerHeight();
- 获取元素的滚动位移：
- 水平滚动位移：
var scrollLeft = $(element).scrollLeft();
- 垂直滚动位移：
var scrollTop = $(element).scrollTop();
在jQuery中，.width() 和 .height() 方法通常用于获取或设置元素的CSS宽度和高度。而 .innerWidth() 和 .innerHeight() 方法用于获取元素的内容区域的大小，.outerWidth() 和 .outerHeight() 方法则获取包括padding和border在内的整个元素的尺寸。
注意： 使用jQuery的 .width() 和 .height() 方法时，如果你传递了一个数值参数，这两个方法也会设置元素的宽度和高度。例如：
// 设置元素的宽度和高度
$(element).width(200); // 设置宽度为200px
$(element).height(100); // 设置高度为100px
同样，.scrollLeft() 和 .scrollTop() 方法也可以用于设置元素的滚动位移。
这里是对元素尺寸属性的正确描述：
-
scrollWidth和scrollHeight：这些属性返回元素内容的总宽度和高度，包括溢出隐藏的部分，即所有的内容加上padding和border，但不包括margin。如果元素有溢出或设置了overflow属性，这些值可以反映出元素的实际尺寸，即使它们不在视窗中可见。 -
-
clientWidth和clientHeight：这些属性返回元素的内容区域的宽度和高度，即不包括边框和外边距，只包括内容和内边距（padding）。 -
offsetWidth和offsetHeight：这些属性返回元素的可见宽度和高度，包括内容、内边距（padding）和边框（border），但不包括外边距（margin）。如果你希望隐藏滚动条，或者需要获取布局尺寸而不包括可见滚动条，这些属性非常有用。
如果你需要获取包括margin在内的元素尺寸，可以通过计算每个方向上的margin与其他尺寸属性的总和来实现。例如，获取一个元素的总宽度（包含内容、padding、border和margin）可以通过以下方式计算：
var totalWidth = element.offsetWidth + parseInt(window.getComputedStyle(element).marginLeft) + parseInt(window.getComputedStyle(element).marginRight);
在这个例子中，window.getComputedStyle(element) 返回一个对象，它包含计算后的样式，我们可以从中获取margin的大小。注意，parseInt 用于将像素值转换为整数，因为 getComputedStyle 返回的是字符串。
