除了className之外，我如何收集一个类'css属性？

Question

For example I might have some css stuff that looks like this:

.divType1 {
    position: absolute;
    width: 60px; height: 60px;
    left: 400px; top: 100px;
    border: 1px solid #89B;
    z-index: 0;
 }

Now within Javascript I want to gather div class divType1' css attributes, but am provided only with the div class, so I can't do something of form ( pseudo-code ):

selectDivWithClass( divType1 ).getCss(left). 

I could hack something by instantiating a div with class divType1 and grab its css attributes, and then destroy it, but is there a better way?

---

The original question has some ambiguity, resulting in lots of good answers that will work in other settings. So here's the restated one:

Using Javascript, how do I gather a subset of a div class' css attributes specified by the maker in the stylesheet, so no browser defaults. Furthermore, assume only 'plain-vanilla' attributes will appear in the css. So stuff like width, height, not stuff like:

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */

I am given nothing but the class name, so I am not given a list of attributes I need to collect before hand.

Finally, the function ideally should return an object mapping style attribute to value.

In the scope of what I am trying to do, the problem is solved by @RobG's answer below.

Answer 1

You could iterate through document.styleSheets , but that many not necessarily be faster than instantiating a DocumentFragment with that class and getting its attributes:

var stylesheets = document.styleSheets;
for (var i=0; i < stylesheets.length; i++) {
    var rules = stylesheets[i].cssRules || stylesheets[i].rules;
    for (var j=0, rule; rule = rules[j++]; ) {
        if (rule.selectorText === '.divType1') {
            alert(rule.style.left)
        }
    }
}

Fiddle: http://jsfiddle.net/dandv/VnCMR/1/

Answer 2

You could add it to a div and then check the details? This works well in jQuery, unfortunately the javascript equivalent doesn't include the class based styles in the style object. So:

var d = $("<div>").addClass("divType1");
console.log(d.css("left"));

would work in jQuery. This in JS wont:

var d = document.createElement("div");
d.className = "divType1";
console.log(d.style.left);

Answer 3

You easily come into cross browser hell here.

What works (at least in chrome) IF you have an existing element (which can be created using document fragment as already mentioned) is

var el = document.getElementsByClassName("divType1")[0];
alert(window.getComputedStyle(el).getPropertyValue("left"));

But looking at this you might opt for using a javascript library like jQuery here.

Answer 4

This gives you all text in first stylesheet

document.styleSheets[0].ownerNode.innerHTML

While this function accepts a selector string and should return its text value

function getStyleBySelector(selector) {
    var sheets = document.styleSheets;
    var selectorRule = false;

    for(var x = 0; x < sheets.length; x++) {
        var rules = sheets[x].cssRules;
        for(var y = 0; y < rules.length; y++) {
            if(rules[y].selectorText == selector) {
                selectorRule = rules[y]
                break;
            }
        }

        if(selectorRule) {
            break;
        }
    }

    var styling = {};

    if(selectorRule) {
        return selectorRule.cssText
    }

    return styling;
}

In your case call it with

getStyleBySelector(".divType1");

Answer 5

Inpsecting an element that has the rule applied to it won't work unless you can filter out the effects of all other rules and default properties (which might be different in different browsers and be the same as a rule property in some but not others). That seems unlikely to be successful in more than one or two browsers in their default configurations.

To get the CSS rule text as text in a cross-browser fashion, use something like:

function getCssRule(selector) {
  var sheets = document.styleSheets;
  var rulesObj, rules, ruleText;

  if (sheets.length) {

    // Determine the name of the rules object
    rulesObj = typeof sheets[0].cssRules != 'undefined'? 'cssRules' : 'rules';

    for (var i=0, iLen=sheets.length; i<iLen; i++) {
      rules = sheets[i][rulesObj];

      for (var j=0, jLen=rules.length; j<jLen; j++) {
        if (rules[j].selectorText.indexOf(selector) > -1) {
          return rules[j].cssText;
        }
      }
    }
  }
}

Note that this will return the actual text of the rule.

Also, there is a CSSValue property, but I am unsure of support.

Edit

If you are dealing only with the rules part and not the selector, you should be able to turn it into an object using something like:

function cssTextToObj(cssText) {

  // Trim selector, initial { and closing } plus whitespace, split on ';'
  var props = cssText.replace(/^[^{]+{\s*/,'').replace(/\s*}\s*$/,'').split(';');
  var resultObj = {};
  var bits;

  for (var i=0, iLen=props.length; i<iLen; i++) {

    // Split each property assignment on ':' only where
    // props[i] has a value
    if (props[i] != '') {
      bits = props[i].split(':');
      resultObj[bits[0]] = bits[1];
    }
  }
  return resultObj;
}

You may want to trim the property names and values of leading and trailing spaces, but that should work. I'm no expert on CSS properties though, so the above may need some tweaking.

Note that if there is a trailing ';' (which browsers seem to add if the original rule didn't have one), the last member of props will be '' (empty string).

One thing you absolutely can't guarantee is the order that properties will be in, not that you can know what order for..in will return them in anyway. IE seems to return cssText in its own order, Firefox seems to preserve the original order.