有沒有一種使用規則名稱指向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

從評論這里是想法：

 function fxSwitchLanguage(varlang) { //* test if already created and remove it before update*/ if (document.contains(document.getElementById("langSetting"))) { document.getElementById("langSetting").remove(); } //* update language chosen*/ var newStyle = document.createElement("style"); newStyle.setAttribute("id", "langSetting"); //* put a mark on it */ var addContent = ".lang-" + varlang + "{display:block;}"; newStyle.appendChild(document.createTextNode(addContent)); var head = document.getElementsByTagName("head")[0]; head.appendChild(newStyle); } 

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

 <button onClick="fxSwitchLanguage('ita');">ITA</button> <button onClick="fxSwitchLanguage('eng');">ENG</button> <hr> <p class="lang-ita">CIAO!</p> <div class="lang-eng">HELLO!</div> 

Answer 2

不，沒有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>