使用javascript隐藏html元素

JavaScript:

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

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

HTML:

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

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

---

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

是-

可见性

是CSS规则名称，而不是HTML属性

htmlElement.style.visibility = 'hidden';

但是请记住，除非您有充分的理由使用

可见性

（还有一些），否则您通常会通过

显示

（='none'）而不是通过

可见性

隐藏元素

另外，您假设您的函数将找到一个元素。否则，您的代码将出错。最好先检查一下：

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

函数隐藏文章（）{
var htmlElements=document.getElementsByTagName（“文章”）；
如果（htmlElements.length）{/这是您想要的语句：

htmlElement.style.visibility = 'hidden';

谢谢，我将添加该检查。我可以检查它是否隐藏并将其更改为可见吗？我尝试了以下操作：
函数hide_article（）{var htmlElement=document.getElementsByTagName（“article”）[0]；if（htmlElement.getAttribute（'visibility'）='visible'）{htmlElement.style.visibility='hidden'；console.log（“hidden”）}else{htmlElement.style.visibility='visible'；console.log（“showing”）}；
@user3164083或简而言之：
htmlElement.style.visibility=htmlElement.getAttribute（'visibility'））=='visible'？'hidden'：'visible'；
再次，您将
可见性
视为一个属性。它不是：它是
样式
属性的子属性。因此：
htmlElements[0]。style.visibility=htmlElements[0]。style.visibility='hidden'？'visible'：'hidden'；