jquery - 是否可以确定哪些元素具有 margin auto？

Question

在调整容器大小时，我们的元素中有一个情况。为我们的元素边距保留“auto”值似乎是不可能的。

例如，当尝试使用 javascript 或 jquery 获取边距值时，该值始终返回 0。我们确实需要在调整大小时保持“自动”，那么有没有办法确定哪些元素有边距:auto；

即使可以使用原始 javascript？

---------------- 可能的解决方案但需要扩展----------------

我发现这很有用。这实际上解决了部分问题!

Retrieve element margin if it's 'auto' (答案 3)

if($(this).position().left*2 == ($(this).parent().innerWidth() - $(this).outerWidth())) {
  console.info($(this).attr('id'));
}

然而，这与许多元素相匹配，因此需要以某种方式更加具体。希望有人知道如何改进这段代码？

Answer 1

编辑:我只在 Chrome 中测试了以下解决方案。它目前不适用于 IE 或 Firefox。我会在它运行时提供更新。

编辑 2:Firefox 解决方案:http://jsfiddle.net/E9eW6/8/ .问题是每个浏览器以不同方式处理它们的 CSSStyleDeclaration 对象。虽然 Firefox 的是可管理的，但 IE 已经在 la-la land 的某个地方使用它们的 CSSRuleStyleDeclaration 等价物。很抱歉，但我的知识和耐心不足以了解 Microsoft 的糟糕实现，这种实现可能会在未来发生改变。

在对这个有趣的问题进行了一些研究之后，我找到了解决方案

jsFiddle:http://jsfiddle.net/S5Sbf/3/

答案实际上是在 Stackoverflow 上的另一个问题中:Can jQuery get all CSS styles associated with an element? (见第二个答案)

基本上，该函数将遍历 document.Stylesheets 以查找与您的元素相匹配的元素，并在一个漂亮的美味对象中返回其所有 CSS。

这是一个非常漂亮的功能，用起来很自豪!

function css(a){
    var sheets = document.styleSheets, o = {};
    for(var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for(var r in rules) {
            if(a.is(rules[r].selectorText)) {
                o = $.extend(o, css2obj(rules[r].style), css2obj(a.attr('style')));
            }
        }
    }
    return o;
}

function css2obj(css){
        var s = {};
        if(!css) return s;
        if(css instanceof CSSStyleDeclaration) {
            for(var i in css) {
                if((css[i]).toLowerCase) {
                    s[(css[i]).toLowerCase()] = (css[css[i]]);
                }
            }
        } else if(typeof css == "string") {
            css = css.split("; ");          
            for (var i in css) {
                var l = css[i].split(": ");
                s[l[0].toLowerCase()] = (l[1]);
            };
        }
        return s;
    }

(第二个答案中的使用详情:Can jQuery get all CSS styles associated with an element?)

使用上面的css函数:

$("*").each(function(index, element){
    cssObj = css($(element));
    $(element).after("margin-left is " + cssObj['margin-left'] + '<br/>');
    $(element).after("margin-right is " + cssObj['margin-right'] + '<br/>');
    $(element).after("margin-top is " + cssObj['margin-top'] + '<br/>');
    $(element).after("margin-bottom is " + cssObj['margin-bottom'] + '<br/>');
});