Is it possible to determine which elements have margin auto?

Question

We have a situation in our project when resizing a container. It seems to be impossible to keep the "auto" value for our elements margin.

For example when trying to get the margin value with javascript or jquery, the value always returns 0. We really need to keep "auto" when resizing, so is there a way to determine which elements have margin: auto;

Even if it's possible using raw javascript?

----------------- Possible solution but needs Extending -----------------

I have found this useful. Which in fact solves part of the problem!

Retrieve element margin if it's 'auto' (Answer 3)

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

However this matches far to many elements, so need to somehow be more specific. hopefully someone knows how to improve this code?

Answer 1

EDIT: I've only tested the following solution in Chrome. It isn't currently working in IE or Firefox. I'll provide an update when I get it working.

EDIT 2: Firefox solution: http://jsfiddle.net/E9eW6/8/ . The problem is that each browser handles their CSSStyleDeclaration object differently. While Firefox's was managable, IE is out in la-la land somewhere with their CSSRuleStyleDeclaration equivalent. I apologize, but I am not knowledgeable nor patient enough to learn Microsoft's poor implementation that will likely change in the future.

after a bit of research of this intriguing question, I found a solution

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

The answer was actually in another question here on Stackoverflow: Can jQuery get all CSS styles associated with an element? (see 2nd answer)

Basically the function will iterate through document.Stylesheets looking for the element that matches yours, and returns all of its CSS in a nice scrumptious object.

This is a very beautiful function, use it with pride!

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;
    }

(Usage details in 2nd answer: Can jQuery get all CSS styles associated with an element?)

Using the css function above:

$("*").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/>');
});