javascript - 使用 JavaScript 显示/隐藏图像

Question

我有一个 HTML 页面，其中包含我通过 CSS 设置为不可见的图像 visibility: hidden .我想创建一个名为“显示图像”的链接，这样当我点击它时，图像就会出现。

现在，我不知道如何建立这样的链接，因为通常是 <a href=...> 的链接链接到其他页面。在我的例子中，我希望链接调用 JavaScript 来显示图像。

Answer 1

如果您已经定义了一个名为 showImage 的 JavaScript 函数来显示图像，您可以这样链接:

<a href="javascript:showImage()">show image</a>

如果您需要帮助定义函数，我会尝试:

function showImage() {
    var img = document.getElementById('myImageId');
    img.style.visibility = 'visible';
}

或者，更好的是，

function setImageVisible(id, visible) {
    var img = document.getElementById(id);
    img.style.visibility = (visible ? 'visible' : 'hidden');
}

那么，您的链接将是:

<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>