Javascript code to change color attribute of an element

Question

Hey i need a list item to change colors depending on an hovering over it, but it is not working

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        var m = document.getElementById("Q");
        m.addEventListener("mouse over", function(){
            m.setAttribute("style", "background-color: #ccc;");
        }, false);
    </script>
    <li>1</li>
    <li id = "Q">Hello darkness my old friend</li>
    <li>2</li>
    </body>
</html>

I know I can use css to change backgound color

Javascript seems a bit overkill here. Just use css like this #q:hover{background-color: red;} — Joscha
– Joscha, Commented Apr 17, 2019 at 12:04
It would help if the style value you provide were valid. #red is not a colour value. — Niet the Dark Absol
– Niet the Dark Absol, Commented Apr 17, 2019 at 12:07
Possible duplicate of Changing backgroundColor after hover in javascript — Bob
– Bob, Commented Apr 17, 2019 at 12:09

BenM · Accepted Answer · 2019-04-17 12:06:11Z

7

This is something you can achieve using simple CSS:

#q:hover {
    background-color: red;
}

edited Apr 17, 2019 at 12:06

BenM

53.3k26 gold badges116 silver badges172 bronze badges

answered Apr 17, 2019 at 12:05

Petros

3773 silver badges15 bronze badges

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

Comments

Hourglasser · Accepted Answer · 2019-04-17 13:32:49Z

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <li>1</li>
    <li id = "Q">Hello darkness my old friend</li>
    <li>2</li>
     <script>
        var m = document.getElementById("Q");
        m.addEventListener("mouseover", function(){
            m.style.backgroundColor = "#ccc";
        }, false);
    </script>
    </body>
</html>

Here is my solution using pure js and HTML.

onmouseover event is triggered once u enter the element
onmouseleave event is triggered once u leave the element

-> you just change styles once events are triggered.

It is possible also to register listeners first to an element in js, but the solution I post has probably cleaner and clearer code.

Element event calls function. Function changes element style. Easy, peazy but I recommend to use css pseudostyle.

function mouseEntered() {
  document.getElementById("Q").style.backgroundColor="pink";
};

function mouseLeaved() {
  document.getElementById("Q").style.backgroundColor="white";
};

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <li>1</li>
    <li onmouseover="mouseEntered()" onmouseleave="mouseLeaved()" id="Q">Hello    darkness my old friend</li>
    <li>2</li>
</body>
</html>

intizar · Accepted Answer · 2022-10-15 17:15:31Z

0

Just remove the # from #red and change "click" event to "mouseover" then it should work

<script>
    var m = document.getElementById("Q");
    m.addEventListener("mouseover", function(){m.setAttribute("style", "background-color: red;");}, false);
</script>

edited Oct 15, 2022 at 17:15

answered Apr 17, 2019 at 13:07

intizar

164 bronze badges

Comments

Sujeet Pandey · Accepted Answer · 2019-04-17 12:25:36Z

0

You can use the setAttribute to change the colour of the element

var myElement = document.getElementById("YOUR_ELEMENTS_UNIQUE_ID");

myElement.setAttribute('style', 'color: red');

answered Apr 17, 2019 at 12:25

Sujeet Pandey

12 bronze badges

Comments

Andu Andrici · Accepted Answer · 2019-04-17 12:42:23Z

If you want to add an effect when the user is hovering the item (and remove it when the user is NOT hovering it - aka 'on hover' effect), just go with CSS:

#Q:hover {
    background-color: red;
}

If you want to add a 'permanent' effect, after the user has hovered an item, go with JS:

var elem = document.getElementById('Q');
elem.addEventListener('onmouseenter', function(){this.style.backgroundColor = 'red'});

The above function can be improved to fire only once, and it's a nice exercise for memory management:

var elem = document.getElementById('Q');

function changeColor(e) {
    e.target.style.backgroundColor = 'red';
    e.target.removeEventListener('onmouseenter', changeColor);
};

elem.addEventListener('onmouseenter', changeColor);

It can also be applied for multiple elements:

var targets = document.getElementsByClassName('myClassName');

function changeColor(e) {
    e.target.style.backgroundColor = 'red';
    e.target.removeEventListener('onmouseenter', changeColor);
};

targets.map(target => target.addEventListener('onmouseenter', changeColor));

Zainul Abideen · Accepted Answer · 2019-04-17 12:07:06Z

-1

Alternatively, you can use the style object to do this.

var m = document.getElementById("Q");
m.addEventListener("click", function(){
    m.style.backgroundColor= '#000'
});

answered Apr 17, 2019 at 12:07

Zainul Abideen

1,90022 silver badges39 bronze badges

Comments

objectif · Accepted Answer · 2019-04-17 12:07:56Z

-2

You can use jquery function to change color of element

<script>
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color", "yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color", "lightgray");
  });
});
</script>

HTML code :

<p>Move the mouse pointer over this paragraph.</p>

answered Apr 17, 2019 at 12:07

objectif

725 bronze badges

2 Comments

BenM Over a year ago

Include a whole library and 10 lines of code, when 3 lines of CSS will achieve exactly the same thing, and be more flexible?

objectif Over a year ago

Yes, we can use css but this is one way to achieve target

Collectives™ on Stack Overflow

Javascript code to change color attribute of an element

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related