写了fgm的第一个练习,代码贴在下面,问题是JavaScript中的注释。还请各位朋友指点迷津,感激不已。
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>控制div属性</title>
<link rel="stylesheet" href="1_div.css">
</head>
<body>
<div id="btn"><input type="button" value="变宽"><input type="button" value="变高"><input type="button" value="变色"><input type="button" value="隐藏"><input type="button" value="重置"></div>
<div id="change" class="change"></div>
<script src="1_div.js"></script>
</body>
</html>
CSS
#btn {
width: 240px;
margin: 0 auto;
}
input {
margin: 0 2px;
}
.change {
width: 100px;
height: 100px;
background-color: black;
margin: 10px auto;
display: block;
}
.change0 {
width: 200px;
}
.change1 {
height: 200px;
}
.change2 {
background-color: red;
}
.change3 {
display: none;
}
.change4 {
width: 100px;
height: 100px;
background-color: black;
margin: 10px auto;
display: block;
}```
## JavaScript
window.onload = function(){
var btn=document.getElementById("btn").childNodes;
// 不太懂为什么不去掉btn里面的空格,这里输出btn的长度竟然是11,而不是5
var change = document.getElementById("change");
for(var i=0;i<5;i++){
btn[i].onclick = (function (n){
return function(){
change.className = change.className + (" change"+n);
}
})(i);
}
}