How to change CSS property using JavaScript

I want to change a CSS property of a class using JavaScript. What I actually want is when a <div> is hovered, another <div> should become visible.

.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; }

<div> Hello </div> <div> <div> Bye </div> <div> Bye1 </div> </div> <div> Hello2 </div>

When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.

7 Answers

You can use style property for this. For example, if you want to change border -

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

similarly for color -

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

Best thing is you define a class and do this -

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

(Cross Browser artifacts must be considered accordingly).

// select element from DOM using *const* const sample = document.getElementById("myid"); // using CONST // or you can use *var* var sample = document.getElementById("myid"); // using VAR // change css style sample.style.color = 'red'; // Changes color, adds style property. // or (not recomended) sample.style = "color: red"; //Replaces all style properties. NOT RECOMENDED 

Use document.getElementsByClassName('className').style = your_style.

var d = document.getElementsByClassName("left1"); d.className = d.className + " otherclass"; 

Use single quotes for JS strings contained within an html attribute's double quotes

Example

<div></div> 

then document.getElementsByClassName('someclass').style = "NewclassName";

<div class='someclass'></div> 

then document.getElementsByClassName("someclass").style = "NewclassName";

This is personal experience.

Consider the following example: If you want to change a single CSS property(say, color to 'blue'), then the below statement works fine.

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

But, for changing multiple properies the more robust way is using Object.assign() or, object spread operator {...};

See below:

const ele=document.getElementById("ele_id"); const custom_style={ display: "block", color: "red" } //Object.assign(): Object.assign(ele.style,custum_style); 

Spread operator works similarly, just the syntax is a little different.

Just for the info, this can be done with CSS only with just minor HTML and CSS changes

HTML:

<div> Hello </div> <div> Hello2 </div> <div> <div> Bye </div> <div> Bye1 </div> </div> 

CSS:

.left, .right{ margin:10px; float:left; border:1px solid red; height:60px; width:60px } .left:hover, .right:hover{ border:1px solid blue; } .right{ float :right; } .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; } .left:hover ~ .center .left1 { display:block; } .right:hover ~ .center .right1 { display:block; } 

and the DEMO:

This is really easy using jQuery.

For instance:

$(".left").mouseover(function(){$(".left1").show()}); $(".left").mouseout(function(){$(".left1").hide()}); 

I've update your fiddle:

You can do so using jQuery like this.

$('.left, .right').on('mouseenter', function(e) { if ($(this).attr('class') == 'left1') { $('.left1').css({ /* 'visibility': 'visible', */ 'display': 'block', }) } else if ($(this).attr('class') == 'left1') { $('.right1').css({ /* 'visibility': 'visible', */ 'display': 'block', }) } }) 

or you can use it like this

for first requirement

$('.left').on('mouseenter', function(e) { $('.left1').css({ /* 'visibility': 'visible', */ 'display': 'block', }) }) 

for second requirement

$('.right').on('mouseenter', function(e) { $('.right1').css({ /* 'visibility': 'visible', */ 'display': 'block', }) })