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

Thanks to Vigrond previous answer above.
I was able to research further into the CSS Rule Object.

Finally I have come up with my own solution to return the actual CSS rules direct from the style-sheet! This not only solves my problem with margin auto, it also allows me to return all other css values which are not returned by the jquery CSS object.

Although the code could be optimized further.
I am very happy with the result, also I added a white list as in my case it is not necessary to loop through all style-sheets.

Here is the code I ended up with!

var cssObj  = {};
function getStyle(element) {    
  var extractStyles = function(cssText) {
    var css = {};
    regEx   = /\.*\{[^\}](.*)}/im;
    styles  = cssText.match(regEx)[1].split(';');
    $.each(styles, function(k, style) {
      $key = style.split(':')[0].trim();
      $val = style.split(':')[1];
      if($key != '')
        css[$key] = $val.trim();
    });
    return css;
  };
  var sheets    = document.styleSheets;
  var whiteList = [
    cssPath+'product.css',
    cssPath+'style.css'
  ];
  $.each(sheets, function(key, sheet) {
    if($.inArray(sheet.href, whiteList) >=0) {
      $rules = sheet.rules || sheet.cssRules;
      $.each($rules, function(key, rule) {
        if(element.is(rule.selectorText)) {
          if(typeof(rule.cssText) != 'undefined' && rule.cssText) {
            cssObj[rule.selectorText] = extractStyles(rule.cssText);
          } else {
            cssObj[rule.selectorText] = (typeof(rule.cssText) != 'undefined' ? extractStyles(rule.style.cssText) : '');
          }
        }
     });
    }
 });
}