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 class="left">
  Hello
</div>
<div class="center">
  <div class="left1">
    Bye
  </div>
  <div class="right1">
    Bye1
  </div>
</div>
<div class="right">
  Hello2
</div>

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

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 class="somelclass"></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 class="left">
    Hello
</div>
<div class="right">
    Hello2
</div>
<div class="center">
       <div class="left1">
           Bye
    </div>
       <div class="right1">
           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: http://jsfiddle.net/pavloschris/y8LKM/

This is really easy using jQuery.

For instance:

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

I've update your fiddle: http://jsfiddle.net/TqDe9/2/

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',
    })
})