Как изменить видимость изображения в 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

изменение visibility к hidden не none

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

} 

Answer 2

Munawir's post Хотя правильно и ответить на ваш вопрос, ИМО, лучше использовать 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 3

Ваш код

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