下面是http://www.fgm.cc/learn/lesson1/01.html这个练习的代码实现
html:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>控制div属性</title>
<link rel="stylesheet" href="div.css">
</head>
<body>
<div id="btn"><input type="button" value="变宽"></input><input type="button" value="变高"></input><input type="button" value="变色"></input><input type="button" value="隐藏"></input><input type="button" value="重置"></input></div>
<div id="change" class="change4 change3"></div>
<script src="div.js"></script>
</body>
</html>
css:
#btn {
width: 240px;
margin: 0 auto;
}
.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;
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);
}
}
我想的思路很简单：就是点击按钮，添加类名，改变样式。在控制台可以看到类名是添加上了，但是样式没有改变。不知是何原因，还请各位朋友指点迷津！谢谢
