如何仅在 JS 变量为 true 时才显示图像

How to display an image only if a JS variable is true?

本文关键字：显示 显示图 图像 true 何仅 JS 变量      更新时间：2023-09-26

刚开始学习HTML，我遇到了一个简单的问题，我找不到答案。我知道我可以使用行<img src ="link to src"/>来显示图像。我也知道我可以使用<script> </script>标签来保存javascript代码。我的问题是，当我的脚本中的变量等于 true 时，我怎么只能显示 img？

<!DOCTYPE html>
<HTML>
    <TITLE>Img Tester</TITLE>
    <BODY> 
       <h1>Image:</h1>
       <img src ="link to src"/>  <!--only display this if the variable c == true in the script--> 
    </BODY>
    <SCRIPT>
        var c = confirm("Display Image?");
            if(c== true) {
               //do something here that displays image? 
            }
    </SCRIPT>
</HTML>

首先，我将图像的默认样式设置为隐藏id="img1"。display: none和visibility: hidden相似，但能见度占用空间。

请看下面的片段。如果按确定，您将看到龙的图像。如果按取消，则不会显示。

var image = document.getElementById("img1");
var c = confirm("Display Image?");
if (c) {
  image.style.display = 'block';
}
#img1 {
  display: none;
  height: 200px;
  width: 200px;
}
<h1>Image:</h1>
<img id="img1" src="http://cdn.playbuzz.com/cdn/df02649d-894e-4b82-94da-cd10dd2449a0/7833c7a7-6301-446b-8fbc-ed948aaaa0be.jpg"/>

一些提示

  1. 标签名称应为小写，而不是大写
  2. 使用等效的if (c)而不是if(c == true)

为该图像指定一个 ID 并隐藏具有该 id 的元素

<!DOCTYPE html>
<HTML>
    <TITLE>Img Tester</TITLE>
    <BODY> 
       <h1>Image:</h1>
       <img  style="display:none" id="img1" src ="link to src"/>  <!--only display this if the variable c == true in the script--> 
    </BODY>
    <SCRIPT>
        var c = confirm("Display Image?");
            if(c== true) {
               document.getElementById( "img1" ).style.display = "inline"; 
            }
    </SCRIPT>
</HTML>

观察代码中的两个更改

  • Id属性已赋予图像元素，并且其显示属性设置为 none

  • 在if部分中，添加了一行以使用该 id 隐藏图像

    document.getElementById（ "img1" ）.style.display = "inline";

通过将其display属性设置为 'inline' .

为此使用div，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id = "display">
    <h1>Image:</h1>
    <img src ="link to src"/>
</div>
<script>
    document.getElementById('display').style.visibility = 'hidden';
    var c = confirm("Display Image?");
    if(c== true) {
       //do something here that displays image? 
       document.getElementById('display').style.visibility = 'visible';
    }
</script>
</body>
</html>
即使

用户单击"取消"，display: none也会下载图像。这是仅当用户单击"确定"时才下载图像的另一种方法

<h1>Image:</h1>
<div id="myImg"></div>
</BODY>
<SCRIPT>
    var c = confirm("Display Image?");
    if(c== true) {
        document.getElementById("myImg").innerHTML='<img src="img_src" />';
    }
</SCRIPT>

您可以将div替换为p或任何您喜欢的东西。

使用此代码

<HTML>
    <TITLE>Img Tester</TITLE>
    <BODY> 
       <h1>Image:</h1>
       <img id="img"/>
    </BODY>
    <SCRIPT>
        var c = confirm("Display Image?");
            if(c== true) {
               document.getElementById("img").setAttribute("src","1.jpg"); 
            }
    </SCRIPT>
</HTML>

我会使用类来完成这项任务...

<img id="image-1" class="myimage" />

在您的样式中，您应该隐藏图像

.myimage {
    display: none;
}

您还需要另一个类来显示您的图像

.myimage-show {
    display: block;
}

现在你需要设置myimage-show类来显示你的图像 

 <script>
    var c = confirm("Display Image?");
    if(c== true) {
       document.getElementById('image-1').classList.add('myimage-show'); 
    }
 </script>
相关文章：