如果它是“自动”，则检索元素边距答案

【问题标题】：Retrieve element margin if it's 'auto'如果它是“自动”，则检索元素边距
【发布时间】：2011-11-11 15:10:13
【问题描述】：

您好，我正在尝试将新 dom 元素与旧元素相同，然后隐藏旧元素，以便新元素替换它：http://jsfiddle.net/jC33F/5/

虽然如果原始元素有 margin:auto jQuery 无法检索它。有没有办法确定元素是否有边距：自动； ?

编辑：感谢@Vibhu，我想出了这个http://jsfiddle.net/jC33F/43/ 看起来很糟糕：D 而且我不确定它是否会一直有效。

欢迎提出更好的建议。

【问题讨论】：

标签： javascript jquery css dom

【解决方案1】：

试试#positionable的绝对位置

$("#positionable").css({
    position: 'absolute',
    top: $("#parent").position().top,
    left: $("#parent").position().left,
    margin: $("#parent").css("margin"),
});

【讨论】：

如果 original(#parent) 元素居中，我也想让 #positionable 元素居中。 position:absolute 是不可能的；
并非不可能。您可以将 left 值设置为 50%，然后将 margin-left 值设置为元素宽度的一半

【解决方案2】：

这可能很疯狂，但是像这样检查它的元素有margin: 0 auto（似乎找不到任何其他方式）：

var margin = $("#parent").css("margin");
if($('#parent').position().left*2 == ($('#parent').parent().innerWidth() - $('#parent').outerWidth())) {
  margin = "0px auto";
}

$("#positionable").css({
    position: $("#parent").css("position"),
    top: $("#parent").css("top"),
    left: $("#parent").css("left"),
    margin: margin
});
$("#parent").hide();

此代码主要检查#parent 的左值是否等于其容器两条边之间的空间的一半。在这种情况下为我工作，在其他情况下可能会失败。

【讨论】：

我想出这个 jsfiddle.net/jC33F/31 看起来很糟糕 :D 而且我不确定它是否会一直有效。

【解决方案3】：

我猜检查返回的边距是否为空会起作用

但请注意，如果您不设置任何边距属性，这仍会将 #positionable 边距属性设置为 auto

http://jsfiddle.net/jC33F/22/

编辑：

我发现这个 jQuery 插件声称它可以从元素返回边距属性

http://www.bramstein.com/projects/jsizes/

【讨论】：

似乎不支持“边距”。虽然 'marginLeft' 对于两个 margin:0px; 都是 '0px'；和边距：自动；
@grisevg 对。对不起，我忘记了。无论如何，请看一下我编辑的帖子。
倾诉你的小提琴示例 - jsfiddle.net/jC33F/39 不起作用。父母边距：0px，但可定位是自动的。

【解决方案4】：

我不喜欢这些解决方案中的任何一个。检查实际的样式表是一种解决方案。我想出的另一个解决方案是存储左/右值，临时更改左值并查看右值是否仍然匹配。如果不是，则将其设置为自动。

var mLeft = el.css('margin-left');
var mRight = el.css('margin-Right');
el.css('margin-left',(parseInt(mLeft)-2)+'px');
var mRightChanged = el.css('margin-Right');
if (mRight != mRightChanged) {
    console.log('read element left/right margins as auto');
    el.css('margin-left','auto');
} else {
    console.log('read element left/right margins as their value');
    el.css('margin-left',mLeft);
}

请注意，此解决方案仅适用于左/右页边距。

【讨论】：