Question

我正在尝试在我正在制作的页面上测试一些JS。我是新手，所以我正在尝试一些简单的事情。显然这对我来说太具挑战性了。这是我的div代码：

<div class="ni">
    <div class="ni_image" onclick="changeColor()">
        <div class="text_box">
            <h3>Northern Ireland</h3>
        </div>
    </div>
    <div class="ni_info">
        <p>info</p>
    </div>
</div>

如果需要，这是外部div的CSS：

.ni {
    width: 600px;
    height: 220px;
    display: block;
    margin: 0px 0px 60px 0px;
}

我试图改变的风格.ni_image：

background-color: lightblue;

此div的唯一其他样式属性是宽度/高度，显示和边距/填充。如果它们有用，请发表评论，然后我会添加它们。

最后这是我正在测试的JS：

function changeColor() {
document.getElementsByClassName('.ni_image').style.backgroundColor = "red";
}

我看过StackOverflow和其他论坛，从我读过的内容我不知道我哪里出错了。我已将本地.js文件与head标记中的脚本标记相关联。

非常感谢任何帮助。

Answer 1

向getElementsByClassName提供参数时，您不必包含点

document.getElementsByClassName('ni_image')

请记住它返回一个HTMLCollection。

Answer 2

document.getElementsByClassName('ni_image')返回一个Arraylike HTMLCollection，因此您必须将其用作数组 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

document.getElementsByClassName('ni_image')[0].style.backgroundColor = "red";

同样如前所述，你不能使用带有此功能的css选择器，因此不需要点。

您可以查看此功能的文档 http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp 并且它表示返回值的类型为NodeList，因此从技术上讲它不是Array，但对于大多数用例，它可以作为一个处理。

我可以给出一个快速提示：如果函数像getElementById中的“getElementXXX”，它将返回一个Object，当它在getElementsByClassName或{{1}中显示“getElementsXXX”时它将返回getElementsByName

Answer 3

假设您有多个div个ni_image类，如果您注意到它HTMLCollection，则需要循环getElementsByClassName() Elements函数中的{1}} - 如复数形式。这是因为类名可以应用于任意数量的元素，因此总是返回HTMLCollection所有这些元素。

var elements = document.getElementsByClassName('ni_image');

for(var i = 0; i < elements.length; i++){
    elements[i].style.backgroundColor = "red";
}

您可以使用HTMLCollection表示法或[index]

访问.items(index)的元素

Answer 4

document.getElementsByClassName返回一个列表。设置列表的style字段将不起作用。

你需要遍历它返回的列表：

var elements = document.getElementsByClassName('ni_image');
elements.forEach(function(e) {
     e.style.backgroundColor = "red";
});

Answer 5

document.getElementsByClassName()返回具有所有给定类名的所有子元素的类数组对象。（MDN）

试试：
{{ 1}}

Answer 6

不要在“。”之前添加您的班级名称：

document.getElementsByClassName（'ni_image'）。style.backgroundColor =“red”;

多次尝试后，Javascript代码无效

6 个答案: