无法弄清楚onMouseOver

时间:2012-03-28 20:35:18

标签: javascript onmouseover

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

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

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

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

3 个答案:

答案 0 :(得分:2)

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

对象document没有元素bgcolor

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

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

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

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

但这不可取。为什么呢?

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

答案 1 :(得分:2)

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

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

答案 2 :(得分:0)

以下作品:

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