Javascript jQuery和css函数的准确性

可能重复：

我有以下HTML：

<p style="margin-left:auto; margin-right:auto; width:200px;">Hello</p>

但是，它会提醒

0px

，而不是预期的

auto

---

为什么会出现这种情况？我如何才能获得汽车？

找到了解决方案！这个小函数将使用jQuery选择器，扫描所有样式表，过滤影响给定DOM元素的规则，解析这些规则，并返回一个对象，其中包含所有继承交互产生的CSS规则列表

<style type="text/css">

    .fool{
        margin-left:200px;
    }

    #fool{
        margin-left:auto;
    }
</style>

<div id="fool" class="fool" style="font-size:100px; height:20px;"></div>

<script type="text/javascript">
    jQuery('document').ready(function($){

        function get_inheritance_result(jQueryElement){
            var styleSheets = document.styleSheets, finalRules = {};
            for(var i in styleSheets) {
                var rules = styleSheets[i].rules || styleSheets[i].cssRules;
                for(var r in rules) {
                var selector = String(rules[r].selectorText);
                    if(selector.indexOf(':') == -1){ //ignoring pseudo selectors, they will not matter here
                        if(jQueryElement.is(selector.toString())) {
                            console.log(selector.toString()); // Will log all the selectors that are affecting the particular DOM element
                            finalRules = $.extend(finalRules, rules[r].style);
                        }
                    }
                }
            }
            //taking any inline css and overriding it on top of our finalRules variable:
            var inlineCSS = jQueryElement.prop('style');
            for(i in inlineCSS){
                if(inlineCSS.hasOwnProperty(i)){
                    if(inlineCSS[i] != ""){
                        finalRules[i] = inlineCSS[i];
                    }
                }
            }

            //and voila!
            return finalRules;
        }

        var style = get_inheritance_result($("#fool"));
        console.log(style); //logs all the resulted css rules
        alert(style.marginLeft); // 'auto'!
        alert(style.fontSize); // '100px'!
    });
</script>

.傻瓜{
左边距：200px；
}
#愚人{
左边距：自动；
}
jQuery（'document'）.ready（函数（$）{
函数获取继承结果（jQueryElement）{
var styleSheets=document.styleSheets，finalRules={}；
for（样式表中的变量i）{
变量规则=样式表[i]。规则| |样式表[i]。cssRules；
for（规则中的var r）{
变量选择器=字符串（规则[r].selectorText）；
如果（selector.indexOf（':'）=-1）{//忽略伪选择器，它们在这里就无关紧要了
if（jQueryElement.is（selector.toString（）））{
console.log（selector.toString（））；//将记录影响特定DOM元素的所有选择器
最终规则=$.extend（最终规则，规则[r].style）；
}
}
}
}
//使用任何内联css并将其覆盖到finalRules变量之上：
var inlineCSS=jquerylement.prop（'style'）；
for（i在inlineCSS中）{
if（inlineCSS.hasOwnProperty（i））{
if（inlineCSS[i]！=“”）{
最终规则[i]=内部规则[i]；
}
}
}
//瞧！
返回最终规则；
}
var style=get_继承_结果（$（“#傻瓜”）；
console.log（style）；//记录所有生成的css规则
警告（style.marginLeft）；//“自动”！
警报（style.fontSize）；//“100px”！
});

---

谢谢你提出这个问题，在解决这个问题的过程中学到了很多。

我只是想看看——这是一个CSS解析器。这个问题可能有点极端。Sizzle对你没有帮助，原因有二：1）它只是一个选择器引擎：它根据CSS选择器选择元素。它不会获取元素的CSS属性值。2） 您已经在使用Sizzle了，因为它是jQuery中使用的选择器引擎：）@maxedison-我在尝试让演示正常工作时就意识到了这一点！：）看一看-但这对于一个小问题来说有点过分。看起来如果我在IE9中尝试上面的方法，它会按照我希望的方式工作，但在FF和Chrome中，它会返回一个

auto

作为

0px

-似乎IE是对的。mootools能显示

auto

也很奇怪。哇，太棒了！）在保持计算优先级的同时，是否有办法将内联样式与任何其他CSS（无论是外部还是内部样式块）组合到上述函数中？样式块中的CSS已在处理中。。。只是CSS声明的内部样式属性被忽略。。。我现在正在尝试合并，让我们看看。编辑了答案。我认为解决方案现在已经完成。CSS声明的内部样式属性现在也正在处理中，并且正在覆盖样式表继承！在计算CSS属性访问之前，o/a。（我现在正在考虑写一个jQuery插件，但后来…饿了）哈哈，真棒的工作人员！我试过了，但我认为我没有正确地使用这个函数，因为我一直没有定义它：

var style=get_heritation_result（$（'#pod'））；警惕（风格、高度）。我有一个id为
pod
的
p
标记-我还将函数调用包装在文档中准备就绪。Chrome和Firefox似乎对CSSStyleDeclaration有一个错误的实现（他们没有继承他们应该继承的所有属性，因此这些属性变得不可用，以后访问它会返回未定义的值）。我注意到所有浏览器对CSSStyleDeclaration的唯一共同属性是
cssText
，它可以用来实现跨浏览器解决方案。
<style type="text/css">

    .fool{
        margin-left:200px;
    }

    #fool{
        margin-left:auto;
    }
</style>

<div id="fool" class="fool" style="font-size:100px; height:20px;"></div>

<script type="text/javascript">
    jQuery('document').ready(function($){

        function get_inheritance_result(jQueryElement){
            var styleSheets = document.styleSheets, finalRules = {};
            for(var i in styleSheets) {
                var rules = styleSheets[i].rules || styleSheets[i].cssRules;
                for(var r in rules) {
                var selector = String(rules[r].selectorText);
                    if(selector.indexOf(':') == -1){ //ignoring pseudo selectors, they will not matter here
                        if(jQueryElement.is(selector.toString())) {
                            console.log(selector.toString()); // Will log all the selectors that are affecting the particular DOM element
                            finalRules = $.extend(finalRules, rules[r].style);
                        }
                    }
                }
            }
            //taking any inline css and overriding it on top of our finalRules variable:
            var inlineCSS = jQueryElement.prop('style');
            for(i in inlineCSS){
                if(inlineCSS.hasOwnProperty(i)){
                    if(inlineCSS[i] != ""){
                        finalRules[i] = inlineCSS[i];
                    }
                }
            }

            //and voila!
            return finalRules;
        }

        var style = get_inheritance_result($("#fool"));
        console.log(style); //logs all the resulted css rules
        alert(style.marginLeft); // 'auto'!
        alert(style.fontSize); // '100px'!
    });
</script>