我在我的 html 文件中使用嵌入式 css 将图像隐藏在几个不同的 DIV 中，但我想使用 Javascript 显示指定图像。例如，弹出窗口会询问用户他们喜欢看哪张照片，然后输入他们选择的内容，然后只会弹出该照片。所以现在我已经隐藏了我的图像，即使告诉它在我的 javascript 中变得可见，它也不想出现。我究竟做错了什么？？？顺便说一句，图像必须分配 DIV 类。 这是我的代码。
<html>
<head>
<style>
body{background-image:url(http://www.desktopaper.com/wp-content/uploads/simple-stars-background-by-fantmayo-dibs.jpg)
}
h1{
margin-bottom:0;
background-color:white;
height:40px;
width:200px;
}
p{
background-color:#200000;
color:white;
height:250px;
width:900px;
float:left;
}
#Uhura,#Sulu,#Scotty{
position:relative;
background-color:#6E6E6E;
height:20px;
width:300px;
margin-left:900px;
display:none;
}
</style>
</head>
<body>
<h1><pre>Title Title</pre></h1>
<p>text text</p>
<div id="Scotty">
<img src="images/scotty.jpg" alt="Scotty" width="300" height="300">
</div>
<div id="Uhura">
<img src="images/uhura.jpg" alt="Uhura" width="300" height="300">
</div>
<div id="Sulu">
<img src="images/sulu.jpg" alt="Sulu" width="300" height="300">
</div>
<script>
var choice;
do{
choice = window.prompt("Which of these Star Trek members wil you like to see?Enter S for Scotty, U for Uhura, or L for Sulu");
choice = choice.toUpperCase();
} while (choice != 'S' && choice != 'U' && choice !='L');
var member;
if(choice == 'S'){
member = "Scotty";
document.getELementById("Scotty").style.visibility='visible';
}else if(choice == "U"){
member = "Uhura";
document.getELementById("Uhura").style.visibility='visible';
}else{
member= "Sulu";
document.getELementById("Sulu").style.visibility='visible';
}
</script>
</body>
</html>
最佳答案
这是因为你使用了两种不同的视觉显示风格。
您使用 display: none; 来隐藏图像，这没问题(但这确实会阻止图像加载)。然后您尝试使用 visibility: visible 显示它们。内容仍然隐藏，因为您没有将显示样式更改为 block。
使用 display: block 而不是 visibility: visible;
if(choice == 'S'){
member = "Scotty";
document.getElementById("Scotty").style.display ='block';
}else if(choice == "U"){
member = "Uhura";
document.getElementById("Uhura").style.display = 'block';
}else{
member= "Sulu";
document.getElementById("Sulu").style.display = 'block';
}
此外，不知道它是否是复制和粘贴的东西，但它是 getElementById 而不是 getELmentById。
一些 additional关于 display 与 visibility 的信息。
关于javascript - 使用 javascript 命令后我的图像不可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23961482/