Question

使用下面的代码，我想在用户点击<content>后插入一些<button>。

在我使用完全正常的this代码之前。然后我将id="content"更改为class="content"并将 JavaScript 代码的document.getElementById更改为getElementsByClassName，现在该功能不再有效。

我有什么需要更改我的代码以便它也适用于类？

您还可以找到我的代码here。

window.myFunction = function () {
    var x = document.getElementsByClassName("content");
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

.content {
    width: 80%;
    padding: 10%
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

<button onclick="myFunction()">Button</button>

<div class="content">
Content of element
</div>

Answer 1

更好的方法是：

var x = document.querySelector(".content");

Answer 2

方法std::list

返回具有全部子元素的所有子元素的类数组对象给定的类名。

如需了解更多信息，请查看here。因此，您必须获取数组的第一个元素，以获得相同的结果。您可以使用索引0来访问它。

getElementsByClassName

window.myFunction = function () {
    var x = document.getElementsByClassName("content")[0];
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

.content {
    width: 80%;
    padding: 10%
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

Answer 3

您可以在本机javascript中使用不同的方法（对于那些不使用jquery的方法）来获取页面上的任何元素。这些是

document.querySelectorAll（）

document.querySelectorAll("div.classNameOne, div.classNameTwo");
document.querySelector（selector）

document.querySelector("div.className")
document.getElementById（元素的idname）

document.getElementById("element_id")
document.getElementsByTagName（标记名 - 获取页面上的所有div或span）

document.getElementsByTagName("div")
document.getElementsByClassName（classname - 获取具有特定类名的所有元素）

document.getElementsByClassName("your_css_class_name")
您还可以通过
获取元素的任何属性
document.getElementsByTagName("H1")[0].getAttribute("class");

当它返回多个元素时，它会像数组一样返回它们。您可以使用从0开始的索引器索引它们。

GetElementBy仅适用于ID而不适用于类

3 个答案: