Can you reference document.styleSheets[].cssRules[] by specifying a rule name?

Question

Can you reference document.styleSheets[].cssRules[] by specifying a rule name?

I am trying to modify a specific class property value in JavaScript without using an integer as a pointer or looping through all classes to find a matching selectorText value.

This is specifically for changing the language displayed on the webpage.

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

Instead of using ".cssRules[i]", I would like to be able to reference the class directly by name like ".cssRules['.lang-eng']".

Since this document may be edited by others, I prefer to avoid hard-coded integers for stability and do not want to loop through all classes to match selectorText properties.

I am open to accommodating browser differences (.cssRules or .rules).

I am simply looking for a way to achieve this functionality in the manner I described.

javascript javascript-objects

Answer 1

Answer №1

Unfortunately, there is no CSSOM API available to retrieve a rule (or a list of rules) by its selector string directly. The only way to achieve this is by iterating through the rules until you find the one you need. While this may not be the most efficient approach, it can be done outside of the fxSwitchLanguage function and just once when the script loads. It's recommended to store references to the relevant rules in constants or a data structure for easy access.

If your objective is to manipulate the rules using JavaScript, an alternative approach would be to actually create these rules using JavaScript as well. This way, you can easily maintain references to them without the need for iteration.

const {sheet} = document.getElementById('languages');
const rules = new Map(['eng', 'ita', 'esp'].map(lang => {
  const rule = sheet.cssRules[sheet.insertRule(`.lang-${lang} {
    display: none;
  }`)]; // The insertRule method 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; 
} // Alternatively, you can implement a toggle functionality

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

Answer 2

Unfortunately, there is no CSSOM API available to retrieve a rule (or a list of rules) by its selector string directly. The only way to achieve this is by iterating through the rules until you find the one you need. While this may not be the most efficient approach, it can be done outside of the fxSwitchLanguage function and just once when the script loads. It's recommended to store references to the relevant rules in constants or a data structure for easy access.

If your objective is to manipulate the rules using JavaScript, an alternative approach would be to actually create these rules using JavaScript as well. This way, you can easily maintain references to them without the need for iteration.

const {sheet} = document.getElementById('languages');
const rules = new Map(['eng', 'ita', 'esp'].map(lang => {
  const rule = sheet.cssRules[sheet.insertRule(`.lang-${lang} {
    display: none;
  }`)]; // The insertRule method 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; 
} // Alternatively, you can implement a toggle functionality

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

Answer 3

Answer №2

Here is an interesting idea from a comment:

function updateLanguage(language) {
  //* Remove existing language settings if they already exist */
  if (document.contains(document.getElementById("langSetting"))) {
    document.getElementById("langSetting").remove();
  }
  //* Update the chosen language */
  var newStyle = document.createElement("style");
  newStyle.setAttribute("id", "langSetting"); //* Add an identifier */
  var addContent = ".lang-" + language + "{display:block;}";
  newStyle.appendChild(document.createTextNode(addContent));
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(newStyle);
}

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

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

Answer 4

Here is an interesting idea from a comment:

function updateLanguage(language) {
  //* Remove existing language settings if they already exist */
  if (document.contains(document.getElementById("langSetting"))) {
    document.getElementById("langSetting").remove();
  }
  //* Update the chosen language */
  var newStyle = document.createElement("style");
  newStyle.setAttribute("id", "langSetting"); //* Add an identifier */
  var addContent = ".lang-" + language + "{display:block;}";
  newStyle.appendChild(document.createTextNode(addContent));
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(newStyle);
}

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

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

Can you reference document.styleSheets[].cssRules[] by specifying a rule name?

Answer №1

Answer №2

Similar questions

Having trouble with AngularJS UI Router failing to load template and controller?

Transforming a JSON object into a list in C#

Returning Props in Dynamic Components with Vue 3

What is the best way to explore JavaScript text using Firebug?

Several different factors

Calling Node Express request inside a GET route

Tips for utilizing Vue 'component' with just Vue added as a page add-on using <script>:

Struggling with creating and exporting TailwindCSS and NextJS

Is it possible to constantly retrieve data at one-second intervals in NextJS using getServerSideProps?

Unable to perform a default import in Angular 9 version

How come the Qunit counter doesn't seem to ever reach its expected target value during this test?

Setting form values using Angular 9

Tips for retrieving data from a database with just one key press

Angular Bootstrap UI - Ensuring only one element collapses at a time

Tips for creating a Vuex mutation without using asynchronous promises

The onsubmit function is not functioning correctly in combination with Ajax

Rendering a Nativescript component once the page has been fully loaded

Is it possible to include number padding in a Bootstrap number input field?

How to retrieve the third party child component within a Vue parent component

Perform JavaScript Actions upon Submission of a Stripe Form