我正在尝试通过翻转使图像变大，然后如果单击显示文本，然后再次单击图像并使文本消失。我无法让文本部分工作。我只能通过翻转使图像变大。这是我的 HTML 和 JS 代码。
HTML:
<head>
<script src="picturetask.js"> </script>
<body>
<h1 style="text-align:center">Picture Manipulation</h1>
<center>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="../images/hippo.png" alt="Hippo" height="200" id=hippo>
<div id=hippos>
</div>
</center>
</body>
</head>
JS:
function bigImg(x) {
x.style.height = "410px";
}
function normalImg(x) {
x.style.height = "200px";
}
function handleClickPar() {
document.getElementById("hippos").innerHTML = "Picture of a Hippo." ;
}
最佳答案
您缺少 onclick 来使 handleClickPar() 执行任何操作。
在该函数中，检查 hippo 是否为空 - 如果是，则设置文本。如果不是，请清除它。
function bigImg(x) {
x.style.height = "410px";
}
function normalImg(x) {
x.style.height = "200px";
}
function handleClickPar() {
var el = document.getElementById("hippos");
if (el.innerHTML.trim()) // if it's not empty or whitespace
el.innerHTML = "";
else
el.innerHTML = "Picture of a Hippo.";
}<div id=hippos>
</div>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" onclick="handleClickPar();" border="0" src="http://placehold.it/200" alt="Hippo" height="200" id=hippo>关于javascript - 通过滚动使图像变大，单击 javascript 时显示文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30399130/