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

如果您只想匹配第一张纸的第一条规则，那么：

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

注意到某些浏览器会准确地返回样式表中的内容，而其他浏览器会返回它们的解释（即它依赖于实现，不能直接在浏览器之间进行比较）。

Answer 2

我认为这回答了你的问题：

您可以使用document.styleSheets[0].cssRules[0].selectorText，它会为您提供'div.title'

Answer 3

你可以通过迭代样式表然后规则（两个循环）来检查样式是否是你想要的样式

与获取计算样式相比，

绝对不是非常有效，但这是一个例子

// iterate stylesheets
var css = document.styleSheets;
for (var i in css) {
    if (!isNaN(i)) {
        // iterate rules in the stylesheets
        for (var j in css[i].cssRules) {
            if (!isNaN(j)) {
                var rule = css[i].cssRules[j];
                if (rule.selectorText.indexOf('div.title') > -1) {
                    // do something with position value
                    alert(css[i].cssRules[j].style.position);
                }
            }
        }
    }
}

jsfiddle

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

3 个答案: