How to Change Style Attribute of an Element Dynamically Using JavaScript?

The Document Object Model (DOM) provides a feature to control the styles dynamically in web development. For instance, it integrates with JavaScript to provide accessibility for modifying the properties of elements. It is useful to change the color, background, and text size in different real-world applications. In this article, you will change the style attributes of an element by utilizing JavaScript.

How to Change the Style Attribute of an Element Dynamically.

It is easy to modify the style attribute of an element by employing JavaScript. The workings of this conversion are as follows. Firstly, getElementById is utilized to access the elements of document objects. After that, a button is created that occurs if the client pressed it. Therefore, the property of a specific element is accessed, and the user dynamically changes the style attribute of an element.



The description of the parameters is as follows:

  • propertyName: specifies the name of property such as color, font-size, etc.
  • propertyValue: represents the value to assign to the property of an element, e,g, “red”.


An example is adapted to change the text color by accessing the style attribute of an element. The code is given below by considering the dynamic change of style attributes.




<h2>An example to change the dynamic properties</h2>

<form action="" name="orderForm">

<input type="BUTTON" value="Press Button" onClick="pressBtn()" />


<script language=javascript type="text/javascript">

  function pressBtn()


     var myElement = document.getElementById("introtext");"red";



<p id="introtext">Welcome to JavaScript World"</p>



The description of the code is explained in a logical order.

  • A button is created by passing the value “Press Button”.
  • A “pressBtn()” method is attached to this button that is triggered when it is called.
  • After that, the above method “pressBtn()” is written within <script> tags.
  • In this method, myElement variable is utilized to save the element attributes.
  • Finally, the style attributes of this element are dynamically changed when the pressBtn() method is called.


After pressing the button “Press Button”, the pressBtn() method is triggered, which changes the style attribute of this specific element dynamically.

Finally, the black text color of “Welcome to JavaScript” is changed to red in the browser by utilizing the JavaScript pressBtn() method.


First, the element is accessed using the getElementById, and then the is employed to change the style attribute of the element. Lastly, a button is associated with it, and when this button has pressed, the style of the element changes. This article demonstrates the possible method to convert the style attribute in JavaScript.

About the author

Syed Minhal Abbas

I hold a master's degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.