denguing 2019-11-11 08:42 采纳率: 0%
浏览 138

前端fgm练习:不去掉空格,子节点的个数为何不对?

写了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);
}
}

  • 写回答

2条回答 默认 最新

  • zqbnqsdsmd 2019-11-11 10:42
    关注
    评论

报告相同问题?