如何更改 JavaScript 中的图像可见性？

Question

我试过了，没有成功：

JS：

function Hide() {
    alert('Hide');
    document.getElementById('I').style.visibility = 'none';

}

function show() {
    alert('Show');
    document.getElementById('I').style.visibility = 'visible';

}

代码隐藏：

<asp:LinkButton ID="LinkButton1" onmouseover="show()" onmouseout="Hide()" runat="server">Mouse Here</asp:LinkButton>

<asp:Image Visible="false" ImageUrl="~/Images/V.png" ID="I" runat="server" />

我添加警报只是为了检查这是否激活了该功能，并且确实如此。

有什么建议吗？

谢谢！

Answer 1

虽然Munawir's post 更正并回答您的问题，但IMO 最好使用display 而不是当您想要show/hide 元素时，这样做更有效。

display:none 表示该元素根本不会出现在页面上，不会为其分配空间。

visibility:hidden该元素不可见，但在页面上为其分配了空间。

示例：

function Hide() {
    alert('Hide');
    document.getElementById('I').style.display = 'none';
        
}

function show() {
    alert('Show');
    document.getElementById('I').style.display = 'block';
       
}

希望这会有所帮助。

Answer 2

你的代码

document.getElementById('I').style.visibility = 'none';

错了应该是

document.getElementById('I').style.visibility = 'hidden';

还要记住，将元素可见性设置为隐藏会隐藏元素但仍会占用屏幕空间，

如果不希望元素在隐藏时占用空间，则必须使用display :none;

document.getElementById('I').style.display = 'none';

然后您可以使用

使其可见

document.getElementById('I').style.display = 'block';

Answer 3

将visibility 更改为hidden 而不是none

function Hide() {
    alert('Hide');
    document.getElementById('I').style.visibility = 'hidden';

}