Question

我正在开展一个项目。如何在不使用按钮的情况下在框内单击时，如何使用Javascript显示居中的图像？

Answer 1

您应该在HTML中加载图片并使用像hidden这样的CSS类隐藏它。然后，您将需要使用addEventListener在单击图像时运行函数，从而切换图像的可见性。图像的居中也可以使用CSS完成。

const blocks = document.querySelectorAll('.block');

blocks.forEach((block) => {
  block.addEventListener('click', () => toggleVisibility(block.querySelector('img')));
});

function toggleVisibility(el) {
  el.classList.toggle('hidden');
}

.container {
  display: flex;
}
.block {
  background-color: red;
  padding: 10px;
}

.hidden {
  display: none;
}

<div class="container">
  <div class="block">
    <img src="https://www.placehold.it/150x150">
  </div>
  <div class="block">
    <img src="https://www.placehold.it/150x150">
  </div>
  <div class="block">
    <img src="https://www.placehold.it/150x150">
  </div>
</div>

Answer 2

你喜欢这个吗？我稍微使用了javascript，但它有效!!!

    <!DOCTYPE html>
    <html>
    <body>
    <div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetter()" id="one"></div>
    <br />
    <div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetterVerTwo()" id="two"></div>
    <br />
    <div style="background-color: red; width: 50px; height: 50px;" onclick="revealImg()" id="image"></div>
    <script>
    function revealImg() {
        document.getElementById("image").innerHTML = "<img src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png' alt='Image' style='width: 50px; height: 50px;' />"
    }
    function xSignDisplayLetter() {
        document.getElementById("one").innerHTML = "<img src='https://image.freepik.com/free-icon/x-symbol_318-1407.jpg' alt='Image' style='width: 50px; height: 50px;' />"
    }
    function xSignDisplayLetterVerTwo() {
        document.getElementById("two").innerHTML = "<img src='https://d3qdvvkm3r2z1i.cloudfront.net/media/catalog/product/cache/1/image/1800x/6b9ffbf72458f4fd2d3cb995d92e8889/n/o/nope_newthumb.png' alt='Image' style='width: 50px; height: 50px;' />"
        }
    </script>
    </body>
    </html>

如果你不熟悉javaScript，那么整个网络上都有js教程。

W3Schools对于教你很多的短期教程来说是一个好主意，并且相对有趣。

CodeCademy是一个很好的长期完整代码教程，需要几周时间才能学习，但通过您的编码技能可以帮助一百万。您需要注册，但它是免费的，并在您完成后保存您的所有工作（代码）。

Answer 3

在您的框中添加onclick属性，该属性调用显示隐藏图像的函数。

<div onclick="showImages()"></div>

Answer 4

你可以在div上添加onclick监听器，在onclick函数中你可以改变div的类

<div class="redbox" id="box" onclick="showImage()"></div>

showImage(){
   var box =document.getelementbyid("box").
   box.classList.remove("redbox");
   box.classList.add("image");
}

揭示图像onClick

4 个答案: