javascript - 带有 GetElementById 的数组不起作用

Question

这是Javascript代码：

var divs = new Array("0", "c", "tb", "cn");
window.onload = function WindowLoad(event) {
    for (i = 0; i < divs.length ; i++) {
        document.getElementById(divs[i]).style.borderWidth = "medium";
    }
}

div 的 ID 都存储在该数组中，但我很困惑为什么它不会在我已有的文本填充物周围放置边框。可能是我需要使用borderWidth以外的东西吗？

Answer 1

document.getElementById(divs[i]).style.border="solid medium";

而不仅仅是

document.getElementById(divs[i]).style.borderWidth="medium";

Answer 2

使用数组时最好不要使用运行索引，因为长度不是预期的行为。例如：

var arr=[];
arr[0]="0";
arr[1000]=1000; 

什么会

arr.length return now? 
the answer is **1001**.

现在，如果您使用 index- 在数组上循环，您将在尝试访问 arr[1] 时出错。

第二件事：使用类而不是内联样式。您的代码应按以下方式编写：

CSS：

myClass{
    border: 1px solid red;
}

脚本

var divs= new Array("0", "c", "tb", "cn");
window.onload = function WindowLoad(event) {
    var key;
    // The key will not loop over the real indexes of the array
    for (key in divs) {
        // make sure that the index we need is valid and exists.
        if (divs.hasOwnProperty(key)){
            document.getElementById(divs[key]).className += 'myClass';
        }
    }
}