关于javascript和DOM_Javascript_Html_Css_Dom

关于javascript和DOM

javascript html css dom

关于javascript和DOM,javascript,html,css,dom,Javascript,Html,Css,Dom,我想使用DOM来更改页面背景色和div背景色，我想我可以使用getElementById和onclick。所以我写代码来实现。但它不起作用。我的代码怎么了如何修复它 HTML javascript function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { w

我想使用DOM来更改页面背景色和div背景色，我想我可以使用getElementById和onclick。所以我写代码来实现。但它不起作用。

我的代码怎么了

如何修复它

HTML

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);

  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);

在

bodyBackgroundColor

中，您需要

文档。

在

body

之前（

body

不是全局的）：

在

divBackgroundColor

中，您遗漏了

.style.

：

divColor.style.backgroundColor = "red";

而不是复杂的

addLoadEvent

，只需将

脚本

标记移动到页面末尾，就在关闭

标记之前。然后，上面定义的所有元素都将存在，您可以与它们交互。更多信息请访问

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

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

问题终于解决了

HTML

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);

  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

您可以向脚本标记添加defer属性，这样您就不必添加onLoadEvent，您的脚本将在DOM加载后执行。请在检查控制台是否有错误之前立即移动？像

body这样的东西没有定义

可能吧？@Beri:或者干脆把脚本放在末尾，这样支持的范围更广。为什么不使用点击锚定标记呢？我照你说的做，问题解决了。非常感谢你！我想我忽视了对控制台的回应。

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

    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;
}

  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);

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

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;
}