javascript - 如何使用 JavaScript 在 CSS 中定位元素

Question

HTML 元素的位置在链接的 CSS 中确定。

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

我只能用document.styleSheets[0].cssRules[0].position来求标题位置的值，但是怎么知道这个位置属于标题呢？
换句话说，js代码如何知道document.styleSheets[0].cssRules[0]是标题？

Answer 1

获取样式时浏览器存在一些差异。通用地获取样式规则:

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

如果只想匹配第一个sheet的第一个规则，那么:

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

并查看选择器:

alert( rules[0].selectorText );

并查看已设置的样式:

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

请注意，某些浏览器会准确返回样式表中所写的内容，而其他浏览器会返回它们对此的解释(即它依赖于实现，不能直接跨浏览器进行比较)。