时间戳

首页 > 解决方案 > 有没有办法使用规则名称指向 document.styleSheets[].cssRules[] ？

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>

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

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

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

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

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

标签： javascriptjavascript-objects

解决方案

从这里的评论是这个想法：

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>

推荐阅读