jQuery中获得元素尺寸和坐标的方法整理

在jQuery中，我们可以使用多种方法获取元素的尺寸和坐标信息，本文将对这些方法进行整理和讲解。

.width()和.height()方法

这两个方法用于获取或设置元素的宽度和高度值。它们可以通过一下方式调用：

$(selector).width();  // 获取元素宽度
$(selector).height(); // 获取元素高度 

$(selector).width(value);  // 设置元素宽度为value
$(selector).height(value); // 设置元素高度为value

其中，width()和height()方法可以返回元素的整数值或者带有单位的字符串值。如果调用时不传递参数，则会返回元素的当前尺寸值，如果传递了一个数值作为参数，则会把元素的尺寸设置为这个值。

.outerWidth()和.outerHeight()方法

这两个方法会计算出元素的外部尺寸，包括边框大小、内边距大小以及元素内容的大小。它们可以通过一下方式调用：

$(selector).outerWidth();
$(selector).outerHeight();

这两个方法默认会返回包括边框在内的元素的尺寸，如果想要获取的仅仅是元素内容的尺寸，可以把参数设置为true，如下所示：

$(selector).outerWidth(true);  // 获取元素内容宽度
$(selector).outerHeight(true); // 获取元素内容高度

.position()和.offset()方法

这两个方法可以一起使用来获取元素的位置信息，.position()方法返回的是相对于父级元素的定位信息，.offset()方法返回的是相对于文档的位置信息。

$(selector).position(); // 获取元素相对于父级元素的位置
$(selector).offset();   // 获取元素相对于文档的位置

这两个方法都会返回一个对象，其中包含了left和top两个属性，分别表示元素在水平和垂直方向上的位置。下面的代码展示了如何将元素的位置输出到控制台：

var position = $(selector).position();
var offset = $(selector).offset();

console.log("Position: left=" + position.left + ", top=" + position.top);
console.log("Offset: left=" + offset.left + ", top=" + offset.top);

示例说明

示例1：获取图片的高度和宽度

假设我们有一张图片，需要获取它的宽度和高度信息，这时可以使用width()和height()方法，如下所示：

var width = $("img").width();
var height = $("img").height();

console.log("Image Width: " + width);
console.log("Image Height: " + height);

示例2：获取鼠标坐标

假设我们需要在页面上跟踪鼠标位置，可以在文档中添加一个空的div元素，并使用mousemove事件来获取鼠标的位置，随后使用.offset()方法来获取鼠标相对于文档的坐标：

<div id="mouse"></div>

<script>
$(document).mousemove(function(e) {
  var x = e.pageX;
  var y = e.pageY;

  var offset = $("#mouse").offset();
  var left = x - offset.left;
  var top = y - offset.top;

  console.log("Mouse Position: left=" + left + ", top=" + top);
});
</script>

以上代码会在页面中创建一个id为mouse的元素，并监听mousemove事件，当鼠标移动时，会在控制台输出鼠标的位置信息。