jQuery and margin: 0 auto

Question

这是一个之前被问过的问题，但我希望我们能够解决它：我正在使用jQuery 1.4。如果我定义样式

#obj { margin: 0 auto; }

然后执行

$('#obj').css('marginLeft');

结果是以像素为计算单位的值。有没有办法在不解析document.styleSheets的情况下，判断这些像素是否来自于auto计算？

- Trevor Burnham

---

根据我刚刚的研究，我认为你只能访问jQuery计算出来的样式，而无法访问原始样式，除非你解析样式表本身。不过，你想要这样做的具体原因是什么呢？ - Jeriko

你的意思是要检查 jQuery 是否已经从原始值 auto 修改了 margin-left 属性吗？还是你的意思是要检查原始样式表属性是否设置为 auto？ - user113716

考虑到“最好”的情况是获取样式可能非常痛苦，您可能希望描述您的总体目标。可能有人有更有可能起作用的替代方法。 - Pointy

好的，这里有一个简单的场景：我想要调整一个元素的大小。如果它的边距已经设置为“auto”，那么我想要保持它居中；如果它的边距已经以像素或其他单位设置，那么我想要尊重这些设置。 - Trevor Burnham

Answer 1

如果边距设置为百分比，也会触发此解决方案，但对于您的目的而言可能已经足够了。基本上，您需要记录在调整大小时更改的哪些边距。因此，您需要将调整大小之前的边距记录到一个数组中：

var aMargins = [];
$('.yourObjs').each(function(i,obj){
  var objML = $(obj).css('marginLeft');
  aMargins.push(objML);
});

然后调整窗口大小，观察哪些边距发生了变化（这些边距可能是“auto”或“%”），对它们进行必要的操作并将窗口恢复到原始大小：

var wW = $(window).width();
var wH = $(window).height();  
window.resizeTo(wW - 5, wH);
$('.yourObjs').each(function(i,obj){
  if ($(obj).css('marginLeft') != aMargins[i]) {
    // your centering code here
  }
}
window.resizeTo(wW,wH);

如果你的居中代码只是调整左边距，那么这对于基于百分比的边距也应该可以正常工作。我无法测试此代码或提供示例，因为我在外出并且正在用手机编写，但希望这能够起到作用或帮助你想出其他解决方案。

- mVChr

Answer 2

你无法从元素本身获取auto，因为样式是层叠的，如果你有这个怎么办？

#obj { margin: 0 auto; }
div #obj { margin: 0 10px; }

这取决于页面以及它的级联方式，基本概念是你正在获取该元素上的计算样式属性，样式表中的内容并不重要，可能有20个样式表等。

基本上可以归结为：获取auto与000px是一个非常罕见的请求，并且需要大量额外的代码来解决，因此很容易判断“不，这不属于核心”。但是，有插件可以进行CSS解析。

简短回答：jQuery核心不能（没有代码）做到这一点，使用插件的jQuery或者通用JavaScript可以实现。

- Nick Craver

---

是的，我意识到jQuery核心无法做到这一点。你提供的插件如何帮助我实现这个目标也不是很明显。在你提供的情况下，肯定有人编写了代码来告诉我#obj上是否激活了“auto”样式？ - Trevor Burnham

@Trevor - 你正在尝试访问样式表中为特定CSS属性分配给该元素的样式，但这不是浏览器公开的内容，它从未成为任何规范的一部分，并且没有可以通过其访问的属性。请记住，JavaScript是一种动态语言，它访问的属性在DOM的某个地方是可用的，由本机代码显式公开...但这个并不是:) 在大多数情况下，“auto”实际上被转换为连接到流更改事件处理程序的居中函数，在它被附加后，它不关心它是否说了“auto” :) - Nick Craver

我知道它不是直接暴露的，但原则上它可以被发现。例如，如果容器元素被调整大小，则计算出的边距将会改变。所以我想问：如何发现它？是否有一个jQuery插件可以为我处理这个发现？ - Trevor Burnham

@Trevor - 我觉得我没有正确传达，它根本没有直接或间接地暴露给JavaScript，没有办法从浏览器中获取这个...你只能通过解析自己代码中的CSS来遍历级联样式树，并尝试查看哪个规则与之匹配。jQuery无法找到JavaScript整体无法看到的内容。边距在调整大小时确实会改变，但是浏览器正在执行此操作，而且它不会公开其思考过程或沿途使用的变量。它的工作方式并不重要...重要的是您可以看到的API，而您无法看到这个。 - Nick Craver