更改元素颜色属性的 Javascript 代码答案

【问题标题】：Javascript code to change color attribute of an element更改元素颜色属性的 Javascript 代码
【发布时间】：2019-09-07 16:14:43
【问题描述】：

嘿，我需要一个列表项来根据悬停在它上面来改变颜色，但它不起作用

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

我知道我可以使用 css 来改变背景颜色

【问题讨论】：

Javascript 在这里似乎有点矫枉过正。像这样使用 css #q:hover{background-color: red;}
w3schools.com/jsref/met_element_setattribute.asp
你说的是悬停，但是绑定点击？
如果您提供的style 值有效，将会有所帮助。 #red 不是颜色值。
Changing backgroundColor after hover in javascript的可能重复

标签： javascript html css

【解决方案1】：

这是您可以使用简单的 CSS 实现的目标：

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

【讨论】：

【解决方案2】：

只需从#red 中删除# 并将“click”事件更改为“mouseover”，它应该可以工作

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

【讨论】：

【解决方案3】：

你可以使用setAttribute来改变元素的颜色

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

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

【讨论】：

【解决方案4】：

如果您想在用户悬停项目时添加效果（并在用户未悬停时将其删除 - 也称为“悬停”效果），只需使用 CSS：

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

如果你想添加一个“永久”效果，在用户悬停一个项目后，使用 JS：

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

上面的函数可以改进为只触发一次，这是一个很好的内存管理练习：

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

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

elem.addEventListener('onmouseenter', changeColor);

也可以应用于多个元素：

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

【讨论】：

【解决方案5】：

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

这是我使用纯 js 和 HTML 的解决方案。

onmouseover 事件在你进入元素后触发
onmouseleave 离开元素后触发事件

->一旦触发事件，您只需更改样式。

也可以先将监听器注册到 js 中的元素，但我发布的解决方案可能具有更清晰和更清晰的代码。

元素事件调用函数。函数改变元素样式。很简单，但我建议使用 css 伪样式。

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>

【讨论】：

【解决方案6】：

或者，您可以使用样式对象来执行此操作。

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

【讨论】：

【解决方案7】：

你可以使用jquery函数来改变元素的颜色

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

HTML 代码：

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

【讨论】：

包含一个完整的库和10行代码，什么时候3行CSS就能实现完全一样的东西，而且更灵活？
是的，我们可以使用 css 但这是实现目标的一种方式