javascript - 鼠标悬停不改变颜色

Question

我的 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'
}

Answer 1

你的比较有误。您需要使用 === 而不是 = (这是赋值)所以你的函数应该是这样的:

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") 获取元素，例如您在代码中所做的那样。