Javascript 有没有办法使用规则名指向document.styleSheets[].cssRules[]呢？

我想使用Javascript更改特定的类属性值，但要通过类名本身，而不是使用任何整数作为指针（cssRules[I]），或者循环所有类以查找匹配的“selectorText”值

这用于更改页面内的可读屏幕语言

<style id="languages" class="languages" title="languages">
<!--
    /* ... more styles ... */

    .lang-ita { display : none; }
    .lang-eng { display : none; }

    /* ... more styles ... */
-->
</style>

<script language="javascript">
<!--
    function fxSwitchLanguage(i)
    {
        /* ... more code ... */

        document.getElementById('languages').sheet.cssRules[i].style.setProperty('display','block');

        /* ... more code ... */
    }
-->
</script>

<button onClick="fxSwitchLanguage(0);">ITA</button>
<button onClick="fxSwitchLanguage(1);">ENG</button>
<br>
<div class="lang-ita">CIAO!</div>
<div class="lang-eng">HELLO!</div>

伊塔
英格


再见！
你好

当然，在只显示新选择的语言之前，我将以前的语言“display”设置为“none”

我想要“.cssRules['.lang eng']”而不是“.cssRules[I]”

由于此文档是共享的，可能会被其他人更改，出于明显的稳定性原因，我确实更喜欢使用其名称而不是任何硬编码的整数来指向类，而且我不想使用“for”循环来测试每个已编写类的“selectorText”属性（可以很容易地使用）

我不介意任何浏览器差异（.cssRules或.rules）

---

我只是想知道是否有可能以我更喜欢的方式来完成它。

从这里的评论可以看出：

函数fxSwitchLanguage（varlang）{ //*测试是否已创建，并在更新之前将其删除*/ if（document.contains（document.getElementById（“langSetting”））{ document.getElementById（“langSetting”）.remove（）； } //*更新所选语言*/ var newStyle=document.createElement（“样式”）； newStyle.setAttribute（“id”、“langSetting”）；//*在上面做个标记*/ var addContent=“.lang-”+varlang+“{display:block；}”； appendChild（document.createTextNode（addContent））； var head=document.getElementsByTagName（“head”）[0]； 头.儿童（新闻风格）； }

[class^='lang']{display:none；}

ITA
英格

再见

你好!来自评论这里是一个想法：


函数fxSwitchLanguage（varlang）{
//*测试是否已创建，并在更新之前将其删除*/
if（document.contains（document.getElementById（“langSetting”））{
document.getElementById（“langSetting”）.remove（）；
}
//*更新所选语言*/
var newStyle=document.createElement（“样式”）；
newStyle.setAttribute（“id”、“langSetting”）；//*在上面做个标记*/
var addContent=“.lang-”+varlang+“{display:block；}”；
appendChild（document.createTextNode（addContent））；
var head=document.getElementsByTagName（“head”）[0]；
头.儿童（新闻风格）；
}

[class^='lang']{display:none；}

ITA
英格

再见

你好!否，没有通过选择器字符串获取规则（或规则列表）的CSSOM API。迭代它们以找到一个是唯一的方法。当然，您不会在
fxSwitchLanguage
函数中执行此操作，每次调用它时，但在它之外，只有在加载脚本时才执行一次。然后将对相关规则的引用存储在几个常量或数据结构中

但是，由于您的目标是通过JavaScript操作规则，因此我将更进一步，并使用JavaScript创建它们。这样，您就可以轻松地存储对它们的引用，而无需迭代


const{sheet}=document.getElementById（'languages'）；
常量规则=新映射（['eng'，'ita'，'esp']）。映射（lang=>{
const rule=sheet.cssRules[sheet.insertRule（`.lang-${lang}{
显示：无；
}`)]；//是的，这很奇怪，`insertRule`返回一个索引
返回[lang，rule]；
}));
设active=null；
函数fxSwitchLanguage（l）{
if（active）rules.get（active）.style.display='none'；
rules.get（l.style.display='block'；
有效=l；
}//或构建一个切换或任何东西

伊塔
英格
ESP


再见！
你好
你好否，没有通过选择器字符串获取规则（或规则列表）的CSSOM API。迭代它们以找到一个是唯一的方法。当然，您不会在
fxSwitchLanguage
函数中执行此操作，每次调用它时，但在它之外，只有在加载脚本时才执行一次。然后将对相关规则的引用存储在几个常量或数据结构中

但是，由于您的目标是通过JavaScript操作规则，因此我将更进一步，并使用JavaScript创建它们。这样，您就可以轻松地存储对它们的引用，而无需迭代


const{sheet}=document.getElementById（'languages'）；
常量规则=新映射（['eng'，'ita'，'esp']）。映射（lang=>{
const rule=sheet.cssRules[sheet.insertRule（`.lang-${lang}{
显示：无；
}`)]；//是的，这很奇怪，`insertRule`返回一个索引
返回[lang，rule]；
}));
设active=null；
函数fxSwitchLanguage（l）{
if（active）rules.get（active）.style.display='none'；
rules.get（l.style.display='block'；
有效=l；
}//或构建一个切换或任何东西

伊塔
英格
ESP


再见！
你好
你好我没有在样式表中过多地使用javascript的api，但我怀疑您能否按键处理规则-主要是因为多个规则可以具有相同的键。如果是关于一个类，则无成本的方法将是覆盖显示并插入新的样式表。Classname将是要更新的变量。'document.createElement（“style”）…是的，Gershom，可以使用整数（.cssRules[i]）；我的例子很好，但如果可能的话，我真的更喜欢使用“类名”的方式。有趣的方式是，G-Cyr，我想我会试试，是的。谢谢你的主意。我会重新考虑你的设计。不要像那样修改CSS规则，而是在祖先元素上使用类来控制子元素的显示。例如，在body上有一个类：
，然后更新您的规则以利用该类：
.lang ita.lang ita{display:block；}.lang ita.lang eng{display:none；}
（显然要为body有类“lang eng”时添加规则），等等。然后你的switch语言函数只需要更改主体上的类。我没有太多地将javascript的api转换成样式表，但我怀疑你能否按键处理规则——主要是因为多个规则可以