gpt4 book ai didi

javascript - 如何仅在 JS 变量为 true 时显示图像?

转载 作者:行者123 更新时间:2023-11-28 12:22:10 24 4
gpt4 key购买 nike

刚开始学习 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: nonevisibility: hide 相似,但可见性占用空间。

请看一下下面的代码片段。如果按确定,您将看到龙的图像。如果您按取消,则不会出现。

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)

关于javascript - 如何仅在 JS 变量为 true 时显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35593686/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com