Question

我有3个功能：

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

问题在于第三个＆＃34; blockSize（）＆＃34;。当我把它放在window.onlod函数的底部时它没有运行; +当我把它放在顶部时，它会禁用它下面的所有功能。这是代码（以className＆＃34计算所有块的宽度和高度百分比;大小＆＃34;）：

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

注意到，当appendChild（最后一行）时，该问题会出现。当我删除它，其他功能正常。还试图把＆lt;跨度＆GT;在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);
    }    
}

一个javascript函数禁用其他功能

1 个答案: