Question

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

<script> </script>

Answer 1

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

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

＆＃13;

var image = document.getElementById("img1");
var c = confirm("Display Image?");
if (c) {
  image.style.display = 'block';
}

＆＃13;

#img1 {
  display: none;
  height: 200px;
  width: 200px;
}

＆＃13;

<h1>Image:</h1>
<img id="img1" src="http://cdn.playbuzz.com/cdn/df02649d-894e-4b82-94da-cd10dd2449a0/7833c7a7-6301-446b-8fbc-ed948aaaa0be.jpg"/>

＆＃13;

一些指示

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

if (c)

Answer 2

为该图像添加一个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属性已赋予image元素，其display属性设置为none
在if部分，添加了一行以使用该ID隐藏图片

document.getElementById（“img1”）。style.display =“inline”;

将display属性设置为'inline'。

Answer 3

使用此代码

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

Answer 4

将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>

Answer 5

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

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

Answer 6

即使用户点击取消，

function dragstart(e){ element.style.cursor = 'move'; } element.addEventListener('dragstart', dragstart, false);也会下载图片。这是另一种仅在用户单击“确定”时下载图像的方法

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或您喜欢的任何内容。

如果JS变量为true，如何显示图像？

6 个答案: