我想用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);
最佳答案
在bodyBackgroundColor , 你需要 document.之前 body (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 引擎停止的地方，让你看到在它继续之前发生了什么)；您可以单步执行代码(观察它一次执行一行)、检查变量等。
调试器最基本的部分是控制台，它向您显示错误(除其他外)。
关于javascript - 关于 javascript 和 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28273823/