使用JavaScript隐藏HTML元素

Question

JavaScript:

function hide_article() {
    var htmlElement = document.getElementsByTagName("article")[0];
    htmlElement.setAttribute("visibility", "hidden");
    console.log("hiding");
};

HTML:

<div id="right-hand-side">
   <img src="resources/Logo.png" onmouseover="hide_article()" onclick="hide_article()"/>
</div>

这个函数被调用了，但文章并没有被隐藏。有什么想法吗？谢谢。

- user3164083

Answer 1

是的- visibility 是一个CSS规则名称，而非HTML属性。

htmlElement.style.visibility = 'hidden';

请记住，除非你有使用 visibility 的充分理由（确实有一些），否则通常会通过 display （= 'none'）而不是通过 visibility 隐藏元素。

此外，您假设您的函数将找到一个元素。如果没有找到，则您的代码将出错。最好先检查这个问题：

function hide_article() {
    var htmlElements = document.getElementsByTagName("article");
    if (htmlElements.length) { //<-- check before continuing
        htmlElements[0].style.visibility = "hidden";
        console.log("hid element");
    }
};

- Mitya

---

谢谢，我会添加这个检查。我可以检查一下它是否被隐藏并将其更改为可见吗？我尝试了这个：function hide_article() { var htmlElement = document.getElementsByTagName("article")[0]; if (htmlElement.getAttribute('visibility') === 'visible'){ htmlElement.style.visibility = 'hidden'; console.log("hiding") } else { htmlElement.style.visibility = 'visible'; console.log("showing") } }; - user3164083

htmlElement.style.visibility = htmlElement.getAttribute('visibility') === 'visible' ? 'hidden' : 'visible'; 可以将 HTML 元素的可见性从可见变为隐藏，或者从隐藏变为可见。 - webketje

再次提醒，您正在将“visibility”视为属性。实际上它是“style”属性的子属性。因此代码应该是：htmlElements[0].style.visibility = htmlElements[0].style.visibility == 'hidden' ? 'visible' : 'hidden'; - Mitya

Answer 2

这是您要翻译的声明:

htmlElement.style.visibility = 'hidden';

- Alexander Vieth