Let's get started!
How to Get the Element from the DOM?
document.querySelector(). For this article we'll be using
document.querySelector() as in my opinion it is the most intuitive one.
To get an element with an
element1 we'll have to use the following code:
For a class you can use the following:
To change the properties of any element first we'll have to query or find the element in the DOM from our code. We'll be using
document.querySelector for this as discussed above.
Once we have the element we're looking for we'll change the CSS properties as follows:
const el = document.querySelector('#el');
el.style.color = 'white';
el.style.backgroundColor = 'red';
<h1 id="el" style="background-color: green">
With the following CSS styling:
!important rule. For example, let's slightly modify the CSS styling from our previous example:
background-color: blue !important;
!important modifier defined, we'll have to use the following code:
el.style.setProperty('background-color', 'red', 'important');
setProperty method takes the name of CSS properties as they are defined in CSS:
el.style.setProperty(property-name, value, priority);
The following is a complete example that changes the CSS property of an element when we click on a button:
Use This Method with Caution
Another thing, the use of <!important> is also discouraged, it makes your CSS harder to debug. The only exception, I can think of right now is to use it to change a styling that your CMS already has defined. Even, that could be done in a better manner in many cases.
A keen eye could catch the fact that something messy but easy could get the job done, but it will require even messier code to deal with it which would make it a nightmare when you start debugging. In most cases you'll be able to get the same job done by the second method we're now going to discuss next.
The first two functions work as you may have guessed and the third one toggles or switches on or off the class. Let's have a look at the full example to better understand this:
Why You Should be Using Classes for Adding or Removing Styling?
Dynamically Changing the Stylesheet
The final method we'll be discussing in order to change the styling of an element is by either adding a new stylesheet or removing an existing one and replacing it with another one.
One use-case of this is if your website supports white and dark mode. When the user selects their preference you just change the stylesheet from, say
night-mode.css and the new styling takes effect. Another useful scenario would be if your website supports multiple themes based on user choice. With this method, you'll be able to change the stylesheet directly changing the complete styling of the page.
Let's see an example:
The example itself is pretty self-explanatory. The most important line is the following:
This way, like any other element and its attribute, we can change the stylesheet's CSS URL, after which the browser will fetch the new URL and make the appropriate changes in the styling of the page. Quite neat, isn't it!