我的 HTML 是:
<p id="demo">This is a test</p>
<script src="change_color.js"></script>
我的 JavaScript 是:
function change_color() {
if (test_text.style.color = 'black') {
test_text.style.color = 'blue';
}
else {
test_text.style.color = 'yellow';
}
}
var test_text = document.getElementById("demo");
test_text.style.color = 'black'
test_text.addEventListener("mouseover", change_color, false);
test_text.addEventListener("mouseout", change_color, false);
现在,为什么这个脚本只在鼠标悬停时改变段落的颜色。而不是在 mouseout 上(它保持蓝色)?
此外,是否可以在 javascript 函数中使用 CSS 选择器来设置颜色,例如:
function change_color() {
#demo {
color = 'yellow'
}
最佳答案
你的比较有误。您需要使用 ===
而不是 =
(这是赋值)
所以你的函数应该是这样的:
function change_color() {
if (test_text.style.color === 'black') {
test_text.style.color = 'blue';
}
else {
test_text.style.color = 'yellow';
}
}
此外,您不能在 JS 方法中使用 CSS。您可以使用 document.querySelector("div")
或 document.getElementById("demo")
获取元素,例如您在代码中所做的那样。
关于javascript - 鼠标悬停不改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49099099/