使用javascript隐藏html元素

hide html element using javascript

本文关键字：元素 html 隐藏 javascript 使用      更新时间：2023-09-26

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>

正在调用此函数，但未隐藏该项目。知道为什么吗？干杯

是-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");
    }
};

这是您想要的语句：

htmlElement.style.visibility = 'hidden';
相关文章：