JavaScript通过CSS类的名称访问CSS类？

olhwl3o2 于 2023-03-14 发布在 Java

关注(0)|答案(6)|浏览(113)

我必须通过名称访问CSS类，下面的代码可以工作。但是如果我尝试hui["myclass"]或hui[".myclass"]而不是hui[0]，它找不到它。

function change_class() {
  var hui = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
  hui[0].style["color"] = "#ff0000"
}

.myclass {
  color: #00aa00;
}

<div class="myclass" onclick="change_class()">Some Text</div>

**编辑：**我需要能够访问，因为我在第1行描述我不想访问通过页面上的个别元素，但直接访问的类名样式表。

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

css

来源：https://stackoverflow.com/questions/13020792/javascript-access-css-class-by-its-name

6条答案

按热度按时间

kx5bkwkv1#

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

// 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属性。

赞(0）回复(0）举报 2023-03-14

rdrgkggo2#

是的，伯奇是对的：
首先必须为样式列表构建索引。
但要注意：
如果有一个以上的样式表，你首先必须在样式表上循环。所以我想改进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";

赞(0）回复(0）举报 2023-03-14

kupeojn63#

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

赞(0）回复(0）举报 2023-03-14

5rgfhyps4#

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

// 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 .

赞(0）回复(0）举报 2023-03-14

g6baxovj5#

要从javascript访问类，你只需要创建一个classist，如果它不存在的话。

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

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

document.querySelector(".className");

赞(0）回复(0）举报 2023-03-14

6mzjoqzu6#

(document.styleSheets[0].cssRules || document.styleSheets[0].rules)[0].style.color = '#ff0000'应该可以工作。
Quirksmode CSSOM (DOM CSS) compatibility table

赞(0）回复(0）举报 2023-03-14

我来回答

JavaScript通过CSS类的名称访问CSS类？

6条答案

相关问题

热门标签

最新问答