HOW TO CHANGE CSS PROPERTY USING ONCLICK

HOW TO CHANGE CSS PROPERTY USING ONCLICK

Date posted: 16/10/2019

In this tutorial, we will explain how to add CSS classes when click the button using javascript function.

document.getElementById() method used to get the element with the specified id.

<!DOCTYPE html>
<html>
<head>
	<title>JAVA SCRIPT</title>
</head>
<style type="text/css">
	
	  .change_red{ 
	  	       font-size: 20px;
               color: white;
	  	       width: 13pc;
	  	       height: 2pc;
                background-color: red; 
                padding:5px; 
                border:1px solid black; 
                border-radius:3px; 
              } 
      .change_green{ 
               font-size: 20px;
                color: white;
      	        width: 13pc;
                height: 2pc;
                background-color: green; 
                padding:5px; 
                border:1px solid black; 
                border-radius:3px; 
               } </style>
<body>
<center>
	<p>JAVA SCRIPT</p>
	<button class="change_red" onclick="myFunction()" id="mybutton">OK</button>
</center>
</body>




	function myFunction() 
	{
		document.getElementById('mybutton').className = "change_green";
    }





</html>

Before clicking the “OK” button:

• 

After clicking the “OK” button:

• 

Thanks for using phoenix solutions.