Skip to main content

Dynamically altering CSS Style Sheets in JS

 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. 

Labels:

Comments

Post a Comment

Popular posts from this blog

Creating Stories and Tasks in Jira: Personas and our Software Development Team

Part of the CI/CD Development Series The next step is developing who is on our hypothetical development team. Given that it has a React front end and ColdFusion as the Server Side language, I came up with the following personas, all of which have their own needs and considerations for our development environment. I've listed all the jobs that need doing, not the people involved since, even on a small team or a team of one, these "hats" are all worn by someone, even if it's the same person. Personas for our Project Dev Ops Coordinator - The person responsible for smooth and accurate deployments CF Developer - The person responsible for the API and fulfillment code development and maintenance. React Developer - The person responsible for the front end development Database Coordinator - The person responsible for the schema, data, up time and, presumably the testing databases used by the developers. Lead Developer - The person responsible for coordinat...
6 comments
Read more

More on Site Architecture / CI/CD / and Repos

We're starting to move from the high level overview and more into the details of our project.  Architecture We established that we using React as our front end technology and ColdFusion as our server side. At a more granular level, we'll be using React with Redux for our front end app and we want our server side to be not just "ajax" enabled but a true REST API. To this end, we're going to incorporate Coldbox from Ortus Solutions. Repos These two code bases have different needs, and possibly locations, when they are deployed. As a result, we're going to have two repositories: one for the React and another for the API. This will allow us to keep our code separated and cleaner all the way through to deployment.  For each of these repos, we'll follow the procedure we laid out previously with the MASTER branch being used to deploy to production and a DEVELOPMENT branch being used for active work which is then fed into the Master branch via pull requests.  Test...
Post a Comment
Read more

CF: Scripting amidst the tags

Recently I had to do a quick "utility" page where I needed to see how many files from a directory listing had been recorded into a database. I've been writing about 98% of my CF code in script syntax but, since it was quick and easy, I did this quickly in tags because it was outputting directly to the browser. In doing so, I made an interesting discovery in that, when you use closures, even in tag based pages, you can write cfscript. Here's the example Get the directory listing:  < cfset alljs = directoryList(expandpath( '/src' ), true , "path" , "*.js" )> Get the database listings and convert it to an array < cfquery name = "alljsQ" datasource = "blah" > select * from sitefiles where filename like '%.js%' </ cfquery > < cfset recordedFiles = valuelist(alljsQ.filename).listToArray()> Use a filter function to weed out the files I'd already recorded < cfset missingFiles = alljs.fi...
Post a Comment
Read more