使用javascript隐藏html元素

时间:2014-07-18 22:17:11

标签: javascript html

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>

正在调用此函数,但文章未被隐藏。知道为什么吗?欢呼声。

2 个答案:

答案 0 :(得分:7)

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

答案 1 :(得分:2)

这是您想要的陈述:

htmlElement.style.visibility = 'hidden';