使用纯javascript更改正文颜色

hi2all我写的代码是当用户点击div

时改变网页的颜色

但是不工作，这是我的代码，它有什么问题

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="gencyolcu" />
    <title>Untitled 1</title>

    <script type="text/javascript">

    var x=document.getElementById("m");
    x.addEventListener("click",function{

      document.body.style.backgroundColor = "red";
    });
    </script>
</head>
<body >
<div id="m">kfjgflg</div>
</body>
</html>

您应该使用如下格式:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta name="author" content="gencyolcu" />
        <title>Untitled 1</title>
    </head>
    <body>
        <div id="m">kfjgflg</div>
        <script type="text/javascript">
            var x=document.getElementById("m");
            x.addEventListener("click",function(){
                document.body.style.backgroundColor = "red";
            });
        </script>
    </body>
</html>

因为你的原始代码中有两个问题:

在令牌"function"之后缺少一个重要的 ()
Javascript只有在页面或元素准备好后才会识别元素。在这种情况下，只有当您的代码在识别它的Javascript代码之后读取元素才能识别它。

上面的代码修复了这个问题。

一个重要的观察:在一些IE中，这段代码不能工作，因为使用了x.a dedeventlistener，在这种情况下，你可以将匿名函数转换为普通函数(带有名称)并使用addEventListener(如果可用)和onclick(建议用于旧IE)进行侦听。这样，代码看起来像:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta name="author" content="gencyolcu" />
        <title>Untitled 1</title>            
    </head>
    <body>
        <div id="m">kfjgflg</div>
        <script type="text/javascript">
            function changeColor(){
                document.body.style.backgroundColor = "red";
            }
            var x=document.getElementById("m");
            if(!!x.addEventListener){ //If exists
                x.addEventListener("click", changeColor);
            }
            x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
        </script>
    </body>
</html>

下面是一个工作示例，代码如下:http://jsfiddle.net/fjorgemota/qCXH3/

如果你打开了JavaScript错误控制台，它会告诉你不能访问undefined的属性/方法addEventListener

您需要在 DOM树构建完成后查找元素m 。放到DOMContentLoaded上调用的函数中:

document.addEventListener('DOMContentLoaded', function() {
    /* ... */
}, false);

或将您的脚本放在<body>的末尾。

相关内容

最新更新

热门标签：