Categories
Action JavaScript Styling

JavaScript for optimizers #22: How to change CSS with JavaScript?

Sometimes you need to make visual changes to elements when creating your a/b tests with JavaScript. You don’t always have a developer that can set up a style sheet for you. So the question might arise: How to change CSS with JavaScript? This is what I will teach you in this article.

Creating style objects

This example script changes the background and text color of the element with the entry-header class
This example script changes the background and text color of the element with the entry-header class

Example

The first way of changing CSS with JavaScript is by injecting a CSS stylesheet into the head of the webpage. I set up a simple template for you so you only have to change the CSS. Try it out on the testing page.

let objectStyle = document.createElement("STYLE");
let objectCSS = document.createTextNode(
  ".entry-header{background-color: white !important;color:black !important;}"
);
objectStyle.appendChild(objectCSS);
document.head.appendChild(objectStyle);

Breakdown

let objectStyle = document.createElement("STYLE");

We start by creating a new style element. We assign the element to the newly declared objectStyle variable.

let objectCSS = document.createTextNode(
  ".entry-header{background-color: white !important;color:black !important;}"
);

This style element needs a text node containing the CSS. Here you can input anything you want, just like a standard CSS file. We save this text node to the newly declared objectCSS variable.

objectStyle.appendChild(objectCSS);

Then we need to append this textnode to our style object.

document.head.appendChild(objectStyle);

Finally, we add the CSS to the webpage to see the changes we made. I added the !important tag to override some of the existing CSS. Use this with caution!

Setting styles directly

This example sets the background color green on an element directly
This example sets the background color green on an element directly

Example

Sometimes adding an entire style document is unnecessary for smaller changes. This method directly selects an element and adds a style attribute to it. In this example, we set a green background. But you can add any CSS attribute that you want. Check out a full list here. Note how these methods don’t use dashes(-) but capitalized follow-up keywords instead. Try it out on the testing page.

document.querySelector(".entry-content").style.backgroundColor = "green";

Breakdown

document.querySelector(".entry-content").style.backgroundColor = "green";

In a single line of code we select the first element with the entry-content class. Then we add a style attribute with a green background color to the element.

Adding styles using classes

This example sets the background color to white by adding a class
This example sets the background color to white by adding a class

Example

Another way of adding the styles you need is by simply adding a class that is already connected with the correct styling. This is usually the case when you need to add standard elements like buttons and input fields. It’s a waste of performance trying to recreate what is already there. Try it out on the testing page.

document.querySelector(".entry-header").classList.add("light");

Breakdown

document.querySelector(".entry-header").classList.add("light");

We simply select the element and add a class with the classList method. Note that this method doesn’t override the existing classes.

Removing styles using classes

This example removes the class and restores the old background
This example removes the class and restores the old background

Example

Sometimes you need to delete existing classes to get the styling you want. Try it out on the testing page.

document.querySelector(".entry-header").classList.remove("light");

Breakdown

document.querySelector(".entry-header").classList.remove("light");

We select the first element with the entry-header class. Then we use the classList method to remove the class between the parentheses. It will only affect the classes that the string matches.

Setting styles on events

This example adds a class to an element when you click on it
This example adds a class to an element when you click on it

Example

What if you are trying to change the styling when an event occurs? An example of an event is a click. Try it out on the testing page. Run the code and click on the background behind the title to see it in action.

function addBackground() {
  document.querySelector(".entry-header").classList.add("light");
}
document.querySelector(".entry-header").onclick = addBackground;

Breakdown

function addBackground() {

We start by defining a new function called addBackground. We give the function a name that describes its action.

document.querySelector(".entry-header").classList.add("light");

Then we select the first element with the entry header class and add a light class.

}

Then we close the function.

document.querySelector(".entry-header").onclick = addBackground;

Finally, we add an onclick event on the first element with the entry header class that executes the addBackground function.

Good luck with adding CSS! Share this on your favorite social platform if you want to show me some support.