Change Css properties through Javascript

Posted By : Gaurav Arora | 29-Sep-2015

Let us suppose, that we have to change some properties of element with css we can do the same. But the same thing we can do here with the help of Javascript.

HTML Code

Hover on the above button to see changes.

Here we will use some Javascript to make our work come live in action.

function changeCss(){
var x = document.getElementById("changeColor");
x.style.color = "#333";
x.style.padding = "10px";
x.style.display = "block";
x.style.transition = "all ease-in 0.2s";
}

We've used onmouseover event here, but we can also use some other events that Javascript provides like:

onClick : This event occurs when the user clicks on a element

ondblclick : This event occurs when the user double clicks on a element

onmousedown : This event occurs when the user presses a mouse button over a element

onmouseup : This event occurs when the user releases a mouse button over a element

and many more.

In this way you can apply any style to our element using javascript.

THANKS