关于 javascript 和 DOM

Question

我想用DOM改变页面背景色和div背景色，我想我可以用getElementById和onclick。所以我写代码来实现。但是不行。

我的代码有什么问题？

如何解决？

HTML

<html lang="en">
<head>
    <mate charset="utf-8" />
    <title>change color</title>
    <link rel="stylesheet" href="test.css" />
</head>

<body>
    <div id="test">
        <a href="javascript:void(0);" id="bodyColor">change body background-color</a>
        <a href="javascript:void(0);" id="divColor">change div background-color</a>
    </div>
<script src="test.js"> </script>
</body>
</html>

CSS

body *{
margin: 0;
padding: 0;
}

a{
    display: block;
    color: white;
    background-color: red;
    width: 200px;
    text-align: center;
    font-weight: bold;
    margin: 150px auto;
    text-decoration: none;
}

#test{
    border: 1px solid black;
    width: 500px;
    margin: 0 auto;
}

javascript

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function bodyBackgroundColor(){
    var color = document.getElementById('bodyColor');
    color.onclick = function(){
        body.style.backgroundColor = "red";
    }
}

function divBackgroundColor(){
    var color = document.getElementById('divColor');
    var divColor = document.getElementById('test');
    color.onclick = function(){
        divColor.backgroundColor = "red";
    }
}

addLoadEvent(bodyBackgroundColor);
addLoadEvent(divBackgroundColor);

Answer 1

在bodyBackgroundColor中，在body之前需要document.（body不是全局的）：

document.body.style.backgroundColor = "red";

在 divBackgroundColor 中，您遗漏了 .style.:

divColor.style.backgroundColor = "red";

而不是复杂的 addLoadEvent，只需将 script 标记移动到页面末尾，就在结束 </body> 标记之前。然后上面定义的所有元素都将存在，您可以与它们进行交互。更多内容在 YUI Best Practices for Speeding Up your Website.

要调试这些类型的东西，您可以使用任何现代浏览器的内置调试器。按F12或者Ctrl+Shift+I或者在浏览器的菜单中找到"Dev Tools"，你会发现你可以看到你页面的源代码，在里面设置断点（JavaScript引擎的地方停下来让你在继续之前看看发生了什么）；您可以单步执行代码（观察它一次执行一行）、检查变量等。

调试器最基本的部分是控制台，它向您显示错误（除其他外）。

Answer 2

问题终于解决了

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
    <mate charset="utf-8" />
    <title>change color</title>
    <link rel="stylesheet" href="test.css" />

</head>

<body>
    <div id="test">
        <a href="javascript:void(0);" id="bodyColor">change body background-color</a>
        <a href="javascript:void(0);" id="divColor">change div background-color</a>
    </div>
    <script src="test.js"> </script>
</body>
</html>

CSS

    body *{
    margin: 0;
    padding: 0;
}

a{
    display: block;
    color: white;
    background-color: red;
    width: 200px;
    text-align: center;
    font-weight: bold;
    margin: 150px auto;
    text-decoration: none;
}

#test{
    border: 1px solid black;
    width: 500px;
    margin: 0 auto;
}

javascript

  function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function bodyBackgroundColor(){
    var color = document.getElementById('bodyColor');
    //var bodyforthis = document.getElementsByTagName('body')
    color.onclick = function(){
        document.body.style.backgroundColor = "red";
    }
}

function divBackgroundColor(){
    var color = document.getElementById('divColor');
    var divColor = document.getElementById('test');
    color.onclick = function(){
        divColor.style.backgroundColor = "blue";
    }
}

addLoadEvent(bodyBackgroundColor);
addLoadEvent(divBackgroundColor);

或者使用更简单的方法

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
    <mate charset="utf-8" />
    <title>change color</title>
    <link rel="stylesheet" href="test.css" />

</head>

<body>
    <div id="test">
        <a href="javascript:void(0);" id="bodyColor">change body background-color</a>
        <a href="javascript:void(0);" id="divColor">change div background-color</a>
    </div>
    <script>
    function bodyBackgroundColor(){
        var color = document.getElementById('bodyColor');
    //var bodyforthis = document.getElementsByTagName('body')
        color.onclick = function(){
            document.body.style.backgroundColor = "red";
            }
    }

    function divBackgroundColor(){
        var color = document.getElementById('divColor');
        var divColor = document.getElementById('test');
        color.onclick = function(){
            divColor.style.backgroundColor = "blue";
        }
    }
    window.onload = bodyBackgroundColor();
    window.onload = divBackgroundColor();
    </script>
</body>
</html>

CSS

body *{
    margin: 0;
    padding: 0;
}

a{
    display: block;
    color: white;
    background-color: red;
    width: 200px;
    text-align: center;
    font-weight: bold;
    margin: 150px auto;
    text-decoration: none;
}

#test{
    border: 1px solid black;
    width: 500px;
    margin: 0 auto;
}

关于 javascript 和 DOM

About javascript and DOM

javascript

html

css

dom