CSS: how to change an element style with JavaScript
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.
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:
To trigger the events, we will use the onClick event.
Put the following code in the body section of your document:
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.
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: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- 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". 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:
Click here to change background colour.
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.