Question

我正在尝试为Enjin网络平台添加一些自定义JavaScript。在平台的HTML中，论坛中有一个共同的元素，我想改变它的背景颜色。

<div class="block-container">...content...</div>

我尝试使用以下JavaScript代码访问它：

function onStart() {
for (block in document.getElementsByClassName("block-container")) {
    console.log("block");
    if (block.style != null) {
        console.log("styleNotNull");
        block.style.backgroundColor = "#252525";
    }
}
}window.onload = onStart;

但是，当页面加载时，它会在控制台中为每个元素记录单词“block”，但不会更改颜色或记录“styleNotNull”。如果我删除了null检查器，它会输出错误并表示style属性为null。关于这个主题的大多数答案都是因为元素丢失了，但显然并非如此，因为for循环正在执行。

Answer 1

纯javascript

使用普通for循环：

var blocks = document.getElementsByClassName("block-container");
for (var i = 0; i < blocks.length; i++) {
    var block = blocks[i];
    block.style.backgroundColor = "#252525";
}

工作jsfiddle。

基本上for..in循环遍历传递的对象的属性。更多信息here。

JQuery的

这可以通过jQuery轻松完成。所以以下是一个例子：

$(function() {
    $(".block-container").css("background-color", "#252525");
});

工作jsfiddle。

Answer 2

在JavaScript中，for..in循环将遍历传递的对象，但是对于每次迭代，迭代器变量将被赋予当前元素的键，而不是值。所以，试试这个：

function onStart() {
    var elements = document.getElementsByClassName("block-container");
    for (key in elements) {
        elements[key].style.backgroundColor = "#252525";
    }
}

window.onload = onStart;

修改

有关是否在JavaScript中使用for..in或典型for循环的讨论，请参阅Why is using "for...in" with array iteration a bad idea?

Answer 3

for循环用于枚举属性，但是您希望迭代数组。请改用for循环。或Array.prototype.forEach，如果它可用于您所针对的所有浏览器。

有关详细信息，请参阅此帖子 - Loop through an array in JavaScript

DOM元素上的空样式属性：JavaScript

3 个答案:

纯javascript

JQuery的