CSS: how to change an element style with JavaScript

Tweet

It is possible to manipulate a CSS rule applied to a DOM element using JavaScript. The solution can be quite effective, because we can change styles according to specific events in our page.

For example, when a button is pressed, or an option is chosen, we can trigger an event that will change a CSS property's value.

In the following post, we will change the background colour for a text, by pressing the text itself. Then we will create another trigger that will change the text colour back to default, again.

JavaScript

The JavaScript code is very simple and with just a few lines, we can control and change the applied style. In the head of our document, we will insert the following snippet:

<script type="text/javascript"> 
function changeStyle(elem) { 
  elem.style.background = 'blue'; 
} 
 
function defaultStyle(elemId) { 
  elem = document.getElementById(elemId); 
  elem.style.background = 'white'; 
} 
</script>

The first function ("changeStyle") will turn the background of our element to blue.
The second function ("defaultStyle") will turn the background colour of our element to the default white.
The style object is used to change a CSS property of an element. Its syntax is:

element.style.CSS_property = value

where:

• element is what we want to alter, we can determine it using its id (getElementById);
• CSS_property is the property we want to apply to the element (color, background etc);
• value is the value for the above property.

CSS

We then need to style our element to the default value. To do so, we insert - again in the head of our document - the related style. In our example the element will have an id="changingColour".

<style type="text/css"> 
#changingColour { 
 border: solid blue 2px; 
} 
</style> 

HTML

Now we need to insert our element - the one that will change background colour when clicked- and a "reset" button - clicked when we need to reset the colour to default.
To trigger the events, we will use the onClick event.
Put the following code in the body section of your document:

<div id="changingColour" onclick="changeStyle(this)";> 
 Click here to change background colour.
</div>
<button onclick="defaultStyle('changingColour');">Reset background colour</button>

And that is all. Very simple and effective.

Other things we might do...

The above example is very basic. However we can use it to alter other styles like the text colour, borders and so on.
Again, in the presented code, the user triggers the style changing by clicking on the text or on a button, however we can decide to trigger the functions on different events that better suit our needs.
Just follow your fantasy and work on it.

Oh, by the way, if you develop a more complex solution, please do share it with us by using the comment section.