jQuery和css函数的准确性

jQuery and the accuracy of the css function

本文关键字：准确性 函数 css jQuery      更新时间：2023-09-26

可能重复：
jQuery和margin:0自动

我有以下HTML：

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

然后我使用jQuery获取margin-left，如下所示：

alert(window.jQuery(element).css('margin-left'));

但是，它会提醒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>

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

相关文章：