javascript - 有没有办法使用规则名称指向 document.styleSheets[].cssRules[] ？

Question

我想使用 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>

当然，在仅显示新选择的语言之前，我将之前的语言“显示”设置为“无”。

我想要“.cssRules['.lang-eng']”而不是“.cssRules[i]”。

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

我不介意任何浏览器差异(.cssRules 或 .rules)。

我只是想知道是否可以按照我喜欢的方式拥有它。

Answer 1

不，没有 CSSOM API 可以通过选择器字符串获取规则(或规则列表)。迭代它们以找到一个是唯一的方法。当然，您不会在每次调用 fxSwitchLanguage 函数时都执行此操作，但在其外部，仅在加载脚本时执行一次。然后只需将相关规则的引用存储在一些常量或数据结构中即可。

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

const {sheet} = document.getElementById('languages');
const rules = new Map(['eng', 'ita', 'esp'].map(lang => {
  const rule = sheet.cssRules[sheet.insertRule(`.lang-${lang} {
    display: none;
  }`)]; // yes, it's weird, `insertRule` returns an index
  return [lang, rule];
}));

let active = null;
function fxSwitchLanguage(l) {
  if (active) rules.get(active).style.display = 'none';
  rules.get(l).style.display = 'block';
  active = l; 
} // or build a toggle or whatever

<style id="languages">
</style>

<button onClick="fxSwitchLanguage('ita');">ITA</button>
<button onClick="fxSwitchLanguage('eng');">ENG</button>
<button onClick="fxSwitchLanguage('esp');">ESP</button>
<br>
<div class="lang-ita">CIAO!</div>
<div class="lang-eng">HELLO!</div>
<div class="lang-esp">HOLA!</div>