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.

President James K. Polk · Accepted Answer · 2025-05-13 23:18:56Z

128

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

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

Similarly, for color:

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

The best thing is to define a class and do this:

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

(Cross-browser artifacts must be considered accordingly.)

edited May 13 at 23:18

President James K. Polk

42.2k34 gold badges113 silver badges149 bronze badges

answered Mar 6, 2013 at 8:05

Ved

8,8177 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dan W. Over a year ago

For updating or adding a new class - document.getElementById("p2").className = "classname"; is not the current way to do it. See this answer here - stackoverflow.com/questions/195951/…

cyclingLinguist Over a year ago

Did document.elm use to be what is now document.documentElement ?

Ved Over a year ago

@cyclingLinguist No, I don't think so. Still need to check.

john v kumpf Jan 15 at 22:39

But I don't want to reference ANY specific html element, I just want to change the css CLASS PROPERTIES themselves, akin to editing the .class{prop:val;} section of code. Perhaps the class is not applied to ANY element at the moment, but will be later.

score 30 · Accepted Answer · 2023-05-28 12:28:53Z

30

// 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, 2023 at 12:28

answered May 22, 2021 at 12:34

user14264568

Comments

Zim · Accepted Answer · 2024-04-03 09:54:13Z

9

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,custom_style);

Spread operator works similarly. The syntax is a little different, that's all.

edited Apr 3, 2024 at 9:54

Zim

5355 silver badges13 bronze badges

answered Dec 3, 2020 at 8:54

Apurva07

911 silver badge3 bronze badges

Comments

Fabrice TIERCELIN · Accepted Answer · 2025-01-18 06:46:30Z

5

Use document.getElementsByClassName('className')[0].style = your_style.

var d = document.getElementsByClassName("left1")[0];
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')[0].style = "NewclassName";

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

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

This is personal experience.

edited Jan 18 at 6:46

Fabrice TIERCELIN

1,04313 silver badges13 bronze badges

answered Mar 6, 2013 at 8:03

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

6 Comments

Derek 朕會功夫 Over a year ago

There is no such thing as getElementByClassName.

Dipesh Parmar Over a year ago

@Derek developer.mozilla.org/en-US/docs/DOM/…

Derek 朕會功夫 Over a year ago

The point is you forgot an s between Element and Class... It should be getElementsByClassName.

Adam Katz Over a year ago

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"]')

Arthur Khazbulatov Over a year ago

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.

|

xpy · Accepted Answer · 2013-03-06 09:18:38Z

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/

Derk Arts · Accepted Answer · 2013-03-06 08:05:59Z

-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 6, 2013 at 8:05

Derk Arts

3,4702 gold badges20 silver badges36 bronze badges

1 Comment

AksLolCoding Over a year ago

This just shows or hides the element, and does not change any css.

Dhia Shalabi · Accepted Answer · 2021-10-26 13:15:13Z

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

Collectives™ on Stack Overflow

How to change CSS property using JavaScript

7 Answers 7

4 Comments

Comments

See below:

Comments

6 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

See below:

Comments

6 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related