如何在 JavaScript 中更改图像可见性

How to change image visibility in JavaScript?

本文关键字：图像 可见性 JavaScript      更新时间：2023-09-26

我试过这个，没有成功：

.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" />

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

有什么建议吗？

谢谢！

将

visibility更改为hidden而不是none 

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

虽然 Munawir 的帖子正确并回答了您的问题，但 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';
       
}

希望这有帮助。

你的代码

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';

相关文章：