我刚开始使用 javascript，我正在尝试做一个简单的示例，但是根据 div 元素的 onmouseover 和 onmouseout 更改 div 的 CSS。
我的测试是创建一个绿色框。当我将鼠标悬停在它上面时，它应该变成蓝色。当我鼠标移开时，它应该变回绿色。
这是我的来源:
<html>
<head>
<title>TEST</title>
<style>
#box {
width: 30px;
height: 30px;
background-color: green;
}
</style>
<script type="text/javascript">
function setBlue(){
document.getElementById("box").style.background-color = "blue";
}
function setGreen(){
document.getElementById("box").style.background-color = "green";
}
</script>
</head>
<body>
<div id="box" onmouseover="setBlue()" onmouseout="setGreen()" />
</body>
</html>
当页面加载时显示绿色框，但是当我将鼠标悬停在上面时没有任何反应。
最佳答案
style.background-color 应该是 style.backgroundColor
<html>
<head>
<title>TEST</title>
<style>
#box {
width: 30px;
height: 30px;
background-color: green;
}
</style>
<script type="text/javascript">
function setBlue() {
document.getElementById("box").style.backgroundColor = "blue";
}
function setGreen() {
document.getElementById("box").style.backgroundColor = "green";
}
</script>
</head>
<body>
<div id="box" onmouseover="setBlue()" onmouseout="setGreen()" />
</body>
</html>关于javascript - 从 javascript 事件设置 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26724504/