typescript is failing to update CSSRule with the newly assigned background-color value

Question

typescript is failing to update CSSRule with the newly assigned background-color value

I am currently working on dynamically changing the CSS style (specifically background-color) for certain text on a webpage. To achieve this, I have been attempting to modify CSSRule by accessing the desired CSSRule based on selectedText. Here is the code snippet:

  changeRule() {
    let stylesheet: CSSStyleSheet = <CSSStyleSheet>this.stylesheet.sheet;
    let ruleLength: any = <CSSStyleSheet>this.stylesheet.sheet.cssRules.length;
    console.log(ruleLength)
    for(let i = 0; i < ruleLength; i++) {
      let currentTag: any = this.stylesheet.sheet.cssRules[i].selectorText as CSSStyleSheet
      let chosenTag: any = (`#text `+`[data-tag-id="${this.selectedTag.id}"]`)
      if(currentTag === chosenTag) {
        console.log("Rule matched");
        console.log(<CSSStyleSheet>this.stylesheet.sheet.cssRules[i].style.backgroundColor);
        let changedTag: any = <CSSStyleDeclaration>this.stylesheet.sheet.cssRules[i].style.backgroundColor
        changedTag = "initial";
        break;
      }      
    }
    console.log(<CSSStyleSheet>this.stylesheet.sheet)
  }

However, despite running this function, the corresponding CSSRule does not seem to be updated with the new BackgroundColor. Furthermore, I am encountering a compile time error related to cssRules[i] stating that "Property cssRules does not exist on type StyleSheet". It's worth mentioning that I am using angular2 with typescript.

If anyone has any suggestions or insights on how to tackle this issue, please feel free to share them with me!

javascript css angular typescript

Answer 1

Answer №1

To update the rule property instead of the variable, make the following change:

<CSSStyleDeclaration>this.stylesheet.sheet.cssRules[i].style.backgroundColor = "initial";

Here's a JavaScript example (using "yellow" in place of "initial"):

function changeRule() {
    let stylesheet = this.stylesheet.sheet;
    let ruleLength = this.stylesheet.sheet.cssRules.length;
    console.log(ruleLength);
    for (let i = 0; i < ruleLength; i++) {
        let currentTag = this.stylesheet.sheet.cssRules[i].selectorText;
        let chosenTag = (`#text ` + `[data-tag-id="${this.selectedTag.id}"]`);
        if (currentTag === chosenTag) {
            console.log("Rule matched");
            console.log(this.stylesheet.sheet.cssRules[i].style.backgroundColor);
            this.stylesheet.sheet.cssRules[i].style.backgroundColor = "yellow";
            break;
        }
    }
    console.log(this.stylesheet.sheet);
}
setTimeout(changeRule.bind({
  stylesheet: {
    sheet: findSheet()
  },
  selectedTag: {
    id: "foo"
  }
}), 1000);
// In case stack snippets move the sheet around:
function findSheet() {
  var sheets = Array.prototype.slice.call(document.styleSheets);
  var sheet;
  sheets.some(function(s) {
    if (s.cssRules[0].selectorText == '#text [data-tag-id="foo"]') {
      sheet = s;
      return true;
    }
  });
  return sheet;
}

#text [data-tag-id="foo"] {
  color: red;
  background-color: grey;
}

<div id="text">
  <div data-tag-id="foo">This is foo</div>
  <div data-tag-id="bar">This is bar</div>
</div>

Answer 2

To update the rule property instead of the variable, make the following change:

<CSSStyleDeclaration>this.stylesheet.sheet.cssRules[i].style.backgroundColor = "initial";

Here's a JavaScript example (using "yellow" in place of "initial"):

function changeRule() {
    let stylesheet = this.stylesheet.sheet;
    let ruleLength = this.stylesheet.sheet.cssRules.length;
    console.log(ruleLength);
    for (let i = 0; i < ruleLength; i++) {
        let currentTag = this.stylesheet.sheet.cssRules[i].selectorText;
        let chosenTag = (`#text ` + `[data-tag-id="${this.selectedTag.id}"]`);
        if (currentTag === chosenTag) {
            console.log("Rule matched");
            console.log(this.stylesheet.sheet.cssRules[i].style.backgroundColor);
            this.stylesheet.sheet.cssRules[i].style.backgroundColor = "yellow";
            break;
        }
    }
    console.log(this.stylesheet.sheet);
}
setTimeout(changeRule.bind({
  stylesheet: {
    sheet: findSheet()
  },
  selectedTag: {
    id: "foo"
  }
}), 1000);
// In case stack snippets move the sheet around:
function findSheet() {
  var sheets = Array.prototype.slice.call(document.styleSheets);
  var sheet;
  sheets.some(function(s) {
    if (s.cssRules[0].selectorText == '#text [data-tag-id="foo"]') {
      sheet = s;
      return true;
    }
  });
  return sheet;
}

#text [data-tag-id="foo"] {
  color: red;
  background-color: grey;
}

<div id="text">
  <div data-tag-id="foo">This is foo</div>
  <div data-tag-id="bar">This is bar</div>
</div>

typescript is failing to update CSSRule with the newly assigned background-color value

Answer №1

Similar questions

Ways to troubleshoot and verify values in PHP that are sent through AJAX

Updating the jQuery AJAX URL dynamically based on user input in a form submission

Having trouble invoking the child component when the button is clicked

Preventing browser flickering when using 'loadURL' to switch between URLs in Electron

Calculate the total with the applied filters

What is the best way to prevent the output folder from appearing in the import statements for users of my package?

Run XQuery dynamically in JavaScript and store the outcome in a JavaScript variable

Arrange the div and ensure that the external JavaScript file functions properly when the page loads

In PHP/HTML, input submit does not work with CSS styling

Guide on incorporating a dropdown menu within a Jssor slider

Form submission not being recognized by Ajax's .done() function

Problem with Angular2 app routing on the github pages

Adjustable CSS display: an adaptable left column paired with a changeable fixed right column

Display customizable template according to variable

Troubleshooting Vue.js dynamic image path loading issues

What is the best way to display text from one text field onto another text field?

Add a directive on the fly, establish a connection, and display it dynamically

AngularJS flip card animation

What is the method for executing a for loop in AngularJS without relying on HTML elements?

Submit a data array using formData through axios