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

Question

我正在尝试将一些自定义JavaScript添加到Enjin Web平台。 在平台的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"。 如果我删除空检查器，它会出错并说样式属性为空。 关于这个主题的大多数答案都是因为缺少元素，但显然情况并非如此，因为 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循环遍历传递的对象的属性。更多信息在这里。

杰奎里

这可以通过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 循环中，请参阅为什么使用"for...在"数组迭代是一个坏主意？

Answer 3

for in 循环用于枚举属性，但您希望遍历数组。请改用 for 循环。或者 Array.prototype.forEach，如果它可用于您定位的所有浏览器。

有关更多信息，请参阅这篇文章 - 在 JavaScript 中循环访问数组