Question

The HTML elements’ position are determined in a linked CSS.

div.title  
{  
position:absolute;  
top:12px;  
}

I can only use document.styleSheets[0].cssRules[0].position to find the value of the position of the title, but how can I know this position belongs to the title?
In other word, how can the js code know the document.styleSheets[0].cssRules[0] is for the title?

Answer 1

There are a few browser differences when getting styles. To get a style rule generically:

function getStyleRule(s) {
  var sheet, sheets = document.styleSheets;
  var ruleProp, rule, rules;

  for (var i=0, iLen=sheets.length; i<iLen; i++) {
    ruleProp = ruleProp || (sheets[i].cssRules? 'cssRules' : 'rules');
    rules = sheets[i][ruleProp];

    for (var j=0, jLen=rules.length; j<jLen; j++) {
      rule = rules[j];
      if (s == rule.selectorText) {
        return rule;
      }
    }
  }
}

If you just want to match the first rule of the first sheet, then:

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
alert( rules[0] );

and to see the selector:

alert( rules[0].selectorText );

and to see the styles that have been set:

alert( rules[0].cssText || rules[0].style.cssText);

Noting that some browsers will return exactly what is written in the style sheet and others will return their interpretation of that (i.e. it is implementation dependent and can’t be directly compared across browsers).