Question

我只是在搞乱学习JavaScript，我想通过将鼠标放在链接上来改变背景的颜色。我真的只想了解onMouseOver。我有：

<a href="http://www.w3schools.com" onMouseOver="document.bgcolor='lightgreen'">Visit W3Schools</a>

我尝试将此应用于单选按钮，这会改变bg颜色onclick，但是如果我想要预览颜色（通过使用onMouseOver）那部分不能正常工作，而不是上面的。

解决方案是如此明显我忽略了它吗？谢谢你的帮助。

Answer 1

不，这不明显。 JavaScript并不那么容易处理。您必须了解可以在JavaScript中使用的对象的类型和名称。

对象document没有元素bgcolor

您正在尝试更改文档元素主体的CSS样式

document.body.style.backgroundColor = 'lightgreen';

可以通过使用您尝试过的文档对象模型（DOM）来实现，但您必须尊重这种情况。文档属性的正确形式是bgColor而不是bgcolor（大写字母C）。

// bad style
document.bgColor = 'lightgreen';

但这不可取。为什么呢？

文档是文档对象模型（DOM）的一部分，因此主要负责数据和......的结构 ......文件。 bgColor的{{1}}属性可能是遗留物中世纪的黑暗HTML，前CSS时代。
文档应包含数据，而不是数据的表示（也称为样式）。这就是每个DOM元素的style属性。
您可以简单地通过为主体提供背景颜色的CSS样式来取代文档的bgColor。该文档仍然具有bgColor属性和值，但您看到的是CSS样式的值

Answer 2

onmouseover必须全部为小写onmouseover，并且它需要等于函数（object.onmouseover=function(){//some code...}，如果在其自己的文件中，onmouseover="functionName()"，如果内联）

以下是一个示例：已更新http://jsfiddle.net/TH2u3/1/

Answer 3

以下作品：

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var a = document.getElementsByTagName("a")[0];
                    a.onmouseover = function() {
                        document.body.style.backgroundColor = "blue";
                    };
                    a.onmouseout = function() {
                        document.body.style.backgroundColor = "green";
                    };
                }
            };
    </script>
</head>
<body onload="p.onload()">
    <a href="http://www.w3schools.com">Visit W3Schools</a>
</body>

无法弄清楚onMouseOver

3 个答案: