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
    关注
    评论

报告相同问题?

悬赏问题

  • ¥50 永磁型步进电机PID算法
  • ¥15 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?