检查 div 是否有自动边距答案

【问题标题】：Check if div has margin auto检查 div 是否有自动边距
【发布时间】：2015-02-04 23:23:38
【问题描述】：

我有一个边距自动的 div，在中心（水平）。

我想用 jQuery 检查 div 是否有自动边距。

我尝试使用.css() 获得左边距。 Mozilla Firefox 显示 0px，Chrome 显示多个像素...所以使用这种方法我无法检查 div 是否具有自动边距...

我尝试过的：

$( document ).ready(function() {
    $("#the_margin").append( $("#example").css("margin-left") );
});

// Check with Chrome and Firefox...
// Firefox returns 0px, but Chrome returns a number of pixels

#example {
  margin: 0 auto 0;
  width: 300px;
  border: 1px solid #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
  Some Content   
</div>

<div id="the_margin" style="font-weight: bold;">
The left margin is: 
</div>

我能做什么？非常感谢！

编辑

更清楚：我如何检查 DIV 在 JQUERY 中是否有自动边距？

【问题讨论】：

我有一个边距自动的 div，在中心（水平）。我想用 jQuery 检查 div 是否有自动边距。 - 你能不能不承认你已经将它设置为 margin-:auto 的事实？
@jbutler483 页面可以有更多的 div。
把它放到一个班级里？从你所说的来看，你在这里遗漏了很多背景信息
我环顾四周，似乎没有那么容易。我认为像这样的简单代码可以工作，JsFiddle，但它没有......改为查看此线程：link
感谢大家对我的帮助。现在问题解决了。

标签： javascript jquery html css

【解决方案1】：

创建了一个函数，它读取 css 并检查指定的 id 是否具有自动边距。

JS (JQuery)

function check_center( the_id ) {
    var result = "";
    var sheets = document.styleSheets;
    var attribute_style = $(the_id).attr( "style" );
    if(attribute_style.match(/margin:([a-z0-9- ]+?)auto/) || attribute_style.match(/margin:auto/) || (attribute_style.match(/margin-left:auto/) && attribute_style.match(/margin-right:auto/)) || (attribute_style.match(/margin-left: auto/) && attribute_style.match(/margin-right: auto/)) ) {
        result = "true";
    } else {
    the_id.matches = the_id.matches || the_id.webkitMatchesSelector || the_id.mozMatchesSelector || the_id.msMatchesSelector || the_id.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (the_id.matches(rules[r].selectorText)) {
                if(result != "true") {
                    if(rules[r].cssText.match(/margin:([a-z0-9- ]+?)auto/) || rules[r].cssText.match(/margin:auto/) || (rules[r].cssText.match(/margin-left:auto/) && rules[r].cssText.match(/margin-right:auto/)) || (rules[r].cssText.match(/margin-left: auto/) && rules[r].cssText.match(/margin-right: auto/)) ) {
                     result = "true";
                    } else {
                     result = "false";  
                    }
                }
            }
        }
    }
    }
    if(result == "") {
     result = "false";   
    }
    return result;
}

$( document ).ready(function() {
    $("#the_margin").append( check_center(document.getElementById('example')) );
});

HTML

<div id="example" style="width: 300px;">
    Some Content   
</div>

<div id="the_margin" style="font-weight: bold;">
    The div is centered?  
</div>

CSS

#example {
margin: 0 auto 0;
border: 1px solid #CCC;
}

小提琴http://jsfiddle.net/vn6ajt6r/6/

适用于：

外部样式表
内部样式表
内联样式

【讨论】：

【解决方案2】：

我认为您的问题 Mozilla Firefox 显示 0px，Chrome 显示多个像素可以这样解决：-

#example {
-webkit-margin: 0 auto 0;
-moz-margin: 0 auto 0;
width: 300px;
border: 1px solid #CCC;
}

FIDDLE:

设置margincss时需要指定浏览器

【讨论】：

它不起作用是什么意思？它在小提琴中工作，我没有使用任何奇怪的 css 来解决这个问题。
这根本没有任何意义，因为margin 从未需要供应商代理。当然它不起作用，因为 div 没有居中，这意味着 margin: 0 auto 没有应用。您在演示中看到 0px 的原因是因为没有 CSS 规则的边距浏览器应用默认边距值，即 margin-left 为 0。
@TusharRaj 你试过 Firefox 吗？顺便说一句：div 没有居中。
是的，我已在 Firefox 中签入。小提琴也在那里工作@MMPP
browserling.com/browse/firefox/35/…

【解决方案3】：

我认为可以用其他方式计算。

计算的margin-left值的唯一顶部示例：

$('#example').offset().left - $('#example').position().left

$(document).ready(function() {
  $("#the_margin").append(
    $('#example').offset().left - $('#example').position().left
  );
});

#example {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  position: relative;
  width: 300px;
  border: 1px solid #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="example">
  Some Content
</div>

<div id="the_margin" style="font-weight: bold;">
  The left margin is:
</div>

【讨论】：