javascript - 一个 JavaScript 函数禁用其他函数

Question

我有3个功能:

window.onload = function() {       
    canvas();   
    changeColor();
    blockSize();    
}

问题出在第三个“blockSize()”上。当我将它放在 window.onlod 函数的底部时它没有运行； + 当我将它放在顶部时，它会禁用其下面的所有功能。这是代码(计算类名“size”的所有 block 的宽度和高度的百分比):

function blockSize() {
    var block = document.getElementsByClassName("size");    
    for (var i in block) {       
        var width = Math.round(block[i].clientWidth/document.documentElement.clientWidth*100);
        var height = Math.round(block[i].clientHeight/document.documentElement.clientHeight*100);
        var span = document.createElement("span");
        span.innerHTML = width+"x"+height+"%";
        block[i].appendChild(span);
    }    
}

注意到，当我追加Child(最后一行)时，这个问题就出现了。当我删除它时，其他功能可以正常工作。还尝试将 手动放入 div 中并使用此 javascript 行(相同的结果):

block[i].firstChild.innerHTML = width+"x"+height+"%";

!!!当我只使用innerHTML 时，一切正常。我明白，我可以使用这样的东西，它会起作用:

block[i].innerHTML = "<span>"+width+"x"+height+"</span>";

Answer 1

问题很可能是由于在 HTMLCollection 上不正确地使用 for-in 造成的。这将包括 DOM 元素之外的其他项目。

当遇到block[i].appendChild(span)时，如果block[i]不是元素，则会抛出错误，因此不会没有 .appendChild() 方法。

改用 for 循环。

function blockSize() {
    var block = document.getElementsByClassName("size");    
    for (var i = 0; i < block.length; i++) {       
        var width = Math.round(block[i].clientWidth/document.documentElement.clientWidth*100);
        var height = Math.round(block[i].clientHeight/document.documentElement.clientHeight*100);
        var span = document.createElement("span");
        span.innerHTML = width+"x"+height+"%";
        block[i].appendChild(span);
    }    
}