How to change CSS property using JavaScript

Question

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.

score 109 · Answer 1 · answered Mar 06 '13 at 08:05

109

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).

answered Mar 06 '13 at 08:05

Ved

8,577
7
36
69

1

For updating or adding a new class - document.getElementById("p2").className = "classname"; is not the current way to do it. See this answer here - https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript – Dan W. Aug 25 '22 at 14:26

Tiago Rangel · Answer 2 · 2023-05-28T12:28:53.963

29

// 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

edited May 28 '23 at 12:28

answered May 22 '21 at 12:34

Tiago Rangel

1,159
15
29

Dipesh Parmar · Answer 3 · 2013-03-06T08:16:09.263

6

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.

edited Mar 06 '13 at 08:16

answered Mar 06 '13 at 08:03

Dipesh Parmar

27,090
8
61
90

11

There is no such thing as `getElementByClassName`. – Derek 朕會功夫 Mar 06 '13 at 08:04
@Derek https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName – Dipesh Parmar Mar 06 '13 at 08:05
6

The point is you forgot an `s` between `Element` and `Class`... It should be `getElementsByClassName`. – Derek 朕會功夫 Mar 06 '13 at 08:06
2

I'm pretty sure single quotes versus double quotes will make no difference in this situation (the browser will interpret them the same; try right-clicking on an element with single quotes and going to "Inspect Element" in Firefox. You'll find it has double quotes). The distinction is only worthwhile when you need to nest them, e.g. `document.querySelector('input[type="checkbox"]')` – Adam Katz Jun 06 '16 at 18:14
5

This is still incorrect, `getElementsByClassName` returns a list of elements, not a single element. You'd have to iterate over it and apply changes to each of them. – Arthur Khazbs Aug 31 '20 at 23:22
How does such an utterly wrong answer get so many upvotes? – CertainPerformance Jan 03 '23 at 02:01

Apurva07 · Answer 4 · 2021-02-01T17:57:38.503

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.

score 0 · Answer 5 · answered Mar 06 '13 at 09:18

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/

score -5 · Answer 6 · answered Mar 06 '13 at 08:05

-5

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/

answered Mar 06 '13 at 08:05

Derk Arts

3,432
2
18
36

1

This just shows or hides the element, and does not change any css. – AksLolCoding Aug 08 '21 at 20:47

score -6 · Answer 7 · answered Oct 26 '21 at 13:15

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

How to change CSS property using JavaScript

7 Answers7

See below:

Linked

Related