编辑子div'；用javascript实现高度

我正在做一个练习，我想用javascript更改子div的高度和宽度，而不给内部div指定类或div

<div id="puzzlearea">
    <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
    <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>
    <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
    <div>13</div> <div>14</div> <div>15</div>
</div>

1  2  3  4
5  6  7  8
9  10 11 12
13 14 15

我本来打算这样做的，但我得到一个错误，说我有一个未定义的对象

function loading(){
    var boxes = document.getElementById("puzzlearea").childNodes;
    for(var i=0; i<boxes.length; i++){
        boxes[i].style.height ='100pt';
    };
 };

window.onload = function(){
     loading();
 };

函数加载（）{
变量框=document.getElementById（“puzzlearea”）.childNodes；
因为（var i=0；i原因：

var boxes = document.getElementById("puzzlearea").children;

一些
childNodes
是文本节点（表示
s之间的空格），它们没有
style
属性，因此
框[i]。style
解析为
未定义的
并尝试获取
未定义的
高度
，导致错误

解决方案：

var boxes = document.getElementById("puzzlearea").children;

请参见：

var boxes = document.getElementById("puzzlearea").children;

确保您的javascript放在文档或
文档的
后面。getElementById（“puzzlearea”）
将返回
null
您可以发布演示来重现该问题吗？