Question

当按下按钮contact_form_top时，我正在尝试使用javascript添加或删除contact_form_btn中隐藏的类，但我无法使其正常工作。

function hide_unhide_btn() {
if (document.getElementId("contact_form_top").classList.contains("hidden");{
    document.getElementById("contact_form_top").classList.remove("hidden");
}
else {
     document.getElementById("contact_form_top").classList.add("hidden");
}}

Answer 1

快速浏览一下，我看到代码中有5个问题：

element.className是一个字符串。

您可以使用element.className += " hidden"向其添加课程。 注意“隐藏”字之前的空格。

如果没有空格，您将获得className =“contact_form_tophidden”（一个单词=一个类）而不是“contact_form_top hidden”（两个类）

此外，您无法使用-=减去字符串，减法仅适用于数字。

我建议你使用classList而不是操作String className，这是一个类似于数组的类列表，你可以add和remove。如果您想要与旧浏览器向后兼容，最好使用jQuery等框架，或遵循https://stackoverflow.com/a/196038/519995中描述的className操作技术

此外，您需要使用getElementsByClassName（大写 C ）
getElementsByClassName返回一个元素集合，您需要使用for循环对它们进行迭代，并逐个修改每个元素的类。同样，如果你使用像jQuery这样的框架，那就容易多了。
此外，您使用的if语句将始终输入第一部分而不是第二部分，因为当函数运行时content始终“关闭”。

Answer 2

我建议使用 classList 来轻松保留添加/删除类，而不是使用.className，例如：

if(content == "closed"){
    document.getElementsByClassName("contact_form_top")[0].classList.remove("hidden");
    content = "open";
}else if(content == "open"){
    document.getElementsByClassName("contact_form_top")[0].classList.add("hidden");
    content = "closed";
}

希望这有帮助。

Answer 3

您可以使用classList API添加类，这非常简单。

这是一种添加和删除类的（不引人注目的）方法：

function hide_unhide_btn() {
this.parentNode.classList.toggle('hidden');
}

var contactFormButton = document.getElementsByClassName('contact_form_btn')[0];
contactFormButton.addEventListener('click',hide_unhide_btn,false);

.hidden {opacity: 0.1;}

<form class="contact_form_top">
<input type="button" value="Contact Me" class="contact_form_btn" />
</form>

使用javascript添加和删除类的问题

3 个答案: