Question

我必须按名称访问CSS类，并且下面的代码有效。但是，如果我尝试hui["myclass"]或hui[".myclass"]而不是hui[0]，则无法找到它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
      .myclass {
        color: #00aa00;
      }
    </style>
    <script type="text/javascript">
        function change_class() {
          var hui = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
          hui[0].style["color"]="#ff0000"
        }
    </script>
  </head>
  <body>
    <div class="myclass" onclick="change_class()">Some Text</div>
  </body>
</html>

编辑：我需要能够按照我在第1行所描述的那样进行操作，我不希望通过页面上的各个元素进行访问，而是按类名直接访问样式表。

所以你们都说我不能只通过索引按类名访问样式表？

Answer 1

不，你不能通过选择器访问它们 - 这是一个简单的列表。您首先必须为它构建索引：

// assuming those are the right rules (ie from the right stylesheet)
var hui = document.styleSheets[0].rules || document.styleSheets[0].cssRules;

var styleBySelector = {};
for (var i=0; i<hui.length; i++)
    styleBySelector[hui[i].selectorText] = hui[i].style;

// now access the StyleDeclaration directly:
styleBySelector[".myclass"].color = "#ff0000";

当然这不是一种万无一失的方法，可能有

多个选择器，例如.myClass, .myOtherClass
一个选择器的多次出现（虽然没关系，最后一个声明无论如何都会覆盖以前的样式）

而不是盲目地分配color属性，而不是首先检查是否存在声明。

Answer 2

document.getElementsByClassName('myclass');

将返回匹配的元素数组。

您还可以使用以下内容：

<body>
    <div id="changethese">
        <div class="myclass" onclick="change_class()">Some Text</div>
    </div>
    <div class="myclass">div two</div>
</body>

使用Javascript：

var changeTheseDivs = document.getElementById('changethese');
changeTheseDivs.getElementsByClassName('myclass')

仅更改所选div中的类。

但是，对此方法的支持仅适用于IE9，因此如果JQuery是一个选项，最好使用它。

修改

我相信我误读了，看起来你想改变实际的CSS规则本身，而不是改变元素上的CSS。理论上，您可以编写一个函数，为您查找名称规则并更改其属性。我想它会看起来像这样（未经测试，应该工作）：

function findAndChangeCSSRule(ruleName, newRule, newProperty){ var mysheet=document.styleSheets[0]; var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules for (i=0; i<myrules.length; i++){ if(myrules[i].selectorText.toLowerCase()==ruleName){ targetrule=myrules[i]; break; } } targetrule.style[newRule.toString()]=newProperty; }

然后用：
来调用它
findAndChangeCSSRule('my_class', 'color', 'red')

Answer 3

要改变既定规则，这是一种方法：

// the [2] index is only because that's where JS Fiddle
// puts the user-entered CSS (from the CSS panel).
var sheets = document.styleSheets[2].rules,
    classString = 'body',
    props = ['color'], // requires a 1:1 relationship between two arrays...ugh
    to = ['#0f0'];

for (var i = 0, len = sheets.length; i < len; i++) {
    if (sheets[i].selectorText == classString) {
        for (var c = 0, leng = props.length; c < leng; c++) {
            sheets[i].style[props[c]] = to[c];
        }
    }
}

JS Fiddle demo

稍微改进的替代方案（一个对象而不是两个数组，需要1：1的关系）：

var sheets = document.styleSheets[2].rules,
    classString = 'body',
    propsTo = {
        'color': '#0f0'
    };

for (var i = 0, len = sheets.length; i < len; i++) {
    if (sheets[i].selectorText == classString) {
        for (var prop in propsTo) {
            if (propsTo.hasOwnProperty(prop)) {
                sheets[i].style[prop] = propsTo[prop];
            }
        }
    }
}

JS Fiddle demo

Answer 4

是的，Bergi是对的：
首先必须为样式列表构建索引但请注意：
如果有多个样式表，则首先必须遍历样式表。所以我想改进Bergis解决方案：

var styleBySelector = {};
for (var j=0; j<document.styleSheets.length; j++)   {
  var styleList = document.styleSheets[j].rules || document.styleSheets[j].cssRules;
  for (var i=0; i<styleList.length; i++)
    styleBySelector[styleList[i].selectorText] = styleList[i].style;
 }

// And then invoke or set the style you wish like this:
styleBySelector[".myStyle"].color = "#ff0000";

Answer 5

要从javascript访问该类，您只需创建一个分类员（如果不存在）。

document.querySelector("myDiv").classList.add("className");

这会将具有指定类名称的新类添加到div中。

其他：

document.querySelector(".className");

Answer 6

(document.styleSheets[0].cssRules || document.styleSheets[0].rules)[0].style.color = '#ff0000' 应该工作。

Quirksmode CSSOM (DOM CSS) compatibility table

JavaScript以其名称访问CSS类？

6 个答案: