How to change css property using javascript

Question

Can anyone help me how I can able to change the css property in JavaScript? What I want to do over here is that, whenever a div is hovered, another div should become visible.

My CSS like:

.left, .right{

    margin:10px;

    float:left;

    border:1px solid red;

    height:60px;

    width:60px

}

.left:hover, .right:hover{

    border:1px solid blue;

}

.center{

    float:left;

    height:60px;

    width:160px

}

.center .left1, .center .right1{

    margin:10px;

    float:left;

    border:1px solid green;

    height:60px;

    width:58px;

    display:none;

}

HTML file:

<div class="left">

    Hello

</div>

<div class="center">

       <div class="left1">

           Bye

    </div>

       <div class="right1">

           Bye1

    </div>    

</div>

<div class="right">

    Hello2

</div>

Any help would be appreciated.

Answer 1

You can use the style property for changing the border and as well as color:

document.elm.style.border = "3px solid #FF0000";

For color:

document.getElementById("p2").style.color="blue";

Also, you can define a class and perform it like:

document.getElementById("p2").className = "classname";

I hope this will help.

Want to know more about Java? Prefer this tutorial on Java Tutorial.

Want to become a Java Expert? Join Java Certification now!!