I recently had a project which was running unit tests in an ajax call and color coding a corresponding row in a table according to the results. The calls were being made, the tests were being run, the results returned and the correct <div> being identified to change the background color. The problem: a CSS class in Bootstrap had such a particular specificity that it was overriding an effort I made to change the background color of the table row using classes.
After searching how to dynamically alter a CSS style sheet I came upon this solution.
The document.styleSheets property is a collection of the style sheets attached to the page. I needed to loop over them, identify the one I wanted to access since they can appear in any order, and then delete the rule I wanted (it wasn't being used anywhere. If it was, this would be much more complicated). Also since, it wasn't a true array, the each() method wasn't available. Throw back to a for loop.
for(var x=0; x<document.styleSheets.length;x=x+1){
if(document.styleSheets[x].cssRules[0].cssText.toString().search(":root { --bs-blue:") > -1){
document.styleSheets[x].deleteRule(162);
}
}
This process identified the style sheet I wanted to access based on the text of the first rule. Admittedly this wouldn't scall across versions since who knows what the first rule for the next version of Bootstrap would be but it worked for now.
Deleting rule 162 runs into the same issues as comparing the rule based on the text. It probably would have been better to loop over the array of rules to find the text of the rule I wanted to delete but I'll have to leave that for a later upgrade. In the meantime, this is working and my results are color coding as expected.
Comments
Post a Comment