CSE 154 Examples

Javascript to Dynamically Change Styles

Description :

Javascript can be used to change the style of a DOM element as well. Once we are able to get access to a DOM element, we can dynamically change the style through Javascript to whatever we want using Javascript.

Example :

The following paragraph is displayed using the following code: <p id="para-1"> Hello! </p>

Hello!

And we have a button:

When we click the button, our JS catches the click event from the button and changes the font size and the text color of the paragraph. To do this, we use the DOMElement. style.fontSize and DOMElement.style.color attributes. The code for this can be found below:

					
						document.getElementById("para-1").style.color = "blue";
						document.getElementById("para-1").style.fontSize = "28pt";