jQuery 为什么jQuery的.css(‘left’)和.position().left返回不同的值

在本文中，我们将介绍为什么在jQuery中，使用.css('left')和.position().left会返回不同的值。这两个方法在定位元素的left属性时常被开发者使用，但它们有着不同的运作原理和返回结果。

CSS定位属性和jQuery.left()

首先我们需要了解CSS中的定位属性，常见的有position: absolute和position: relative。当一个元素使用position: absolute进行定位时，它的位置是相对于最近的具有定位属性（position不等于static）的父元素的左上角来计算的。而position: relative则基于元素自身的初始位置来进行定位。

当我们在使用.css('left')方法时，它将返回一个相对于最近的具有定位属性的父元素左边缘的像素值。如果没有找到具有定位属性的父元素，那么它将返回相对于文档左边缘的像素值。

例如，HTML结构如下：

<div class="parent">
  <div class="child"></div>
</div>

CSS样式如下：

.parent {
  position: relative;
  left: 100px;
}

.child {
  position: absolute;
  left: 50px;
}

使用jQuery代码：

var parentLeft = ('.parent').css('left');
var childLeft =('.child').css('left');

console.log(parentLeft);  // 输出：100px
console.log(childLeft);   // 输出：50px

在这个例子中，.parent元素的左边距是相对于文档左边缘的100像素。而.child元素的左边距是相对于.parent元素的左边缘的50像素。

DOM元素的偏移量和jQuery.position().left

除了使用CSS的定位属性来定位元素，我们还可以使用JavaScript的DOM API来获取元素的位置信息。在这里，我们使用.position().left方法来获取元素相对于其最近的具有定位属性的父元素内边距区域左侧的偏移量。

var offsetLeft = $('.child').position().left;
console.log(offsetLeft);  // 输出：50

继续使用上面的HTML和CSS代码，我们使用.position().left方法获取到了.child元素相对于其父元素内边距区域左侧的偏移量，结果是50像素。与之前使用.css('left')方法获取到的值一致。

变换和定位计算的影响

然而，当元素的位置发生变化时，.css('left')方法和.position().left方法的返回值可能会不同。这是因为这两个方法计算位置的方式不同。

首先，.css('left')方法基于CSS样式表中的left属性值进行计算。如果元素的left属性值发生变化，.css('left')方法返回的值也会相应地发生变化。

其次，.position().left方法基于元素的偏移量进行计算。此时，变换（transform）操作和CSS过渡（transition）不会影响到.position().left的返回值。也就是说，无论元素是否发生了位移或变换，.position().left方法仍然会返回元素相对于其父元素内边距区域左侧的偏移量。

示例说明

下面我们通过一个示例来说明这两个方法的区别。

<div class="parent">
  <div class="child"></div>
</div>

<button onclick="changePosition()">改变位置</button>

.parent {
  position: relative;
  left: 100px;
}

.child {
  position: absolute;
  left: 50px;
  transition: transform 1s ease-in-out;
}

.move {
  transform: translateX(100px);
}

function changePosition() {
  ('.child').addClass('move');

  var cssLeft =('.child').css('left');
  var positionLeft = $('.child').position().left;

  console.log('CSS left:', cssLeft);
  console.log('Position left:', positionLeft);
}

当点击按钮时，我们会给.child元素添加一个move类，这会触发一个CSS过渡，让元素沿X轴正向移动100像素。

结果如下：

CSS left: 50px
Position left: 50

可以看到，使用.css('left')方法返回的值仍然是之前的绝对位置50像素，而.position().left方法返回的值却是改变后的偏移量50。

总结

在jQuery中，.css('left')方法和.position().left方法的返回值有所不同。.css('left')方法返回的是基于CSS样式表中的left属性值计算得到的值，而.position().left方法返回的是基于元素的偏移量计算得到的值。当元素的位置发生变化时，这两个方法的返回值可能会不同。因此，在使用这两个方法时，需要根据具体的需求来选择合适的方法。