Question

这是问题，我希望我的HTML文件中的某些图片首先被隐藏，而在其位置保留黑色。单击后显示。我可以将js代码放在布局文件中，但是为了保持代码的清洁和极易读性，不应存在div span标签或id或class，只需在img标签中添加“ onclick”之类的参数即可。

当前代码：

  <script type="text/javascript">
     function toggle_visibility() {
        if ( this.style.visibility == 'hidden' )
           this.style.visibility = 'visible';
        else
           this.style.visibility = 'hidden';
     }
 </script>



 <img onclick="toggle_visibility();" src="IMG.jpg"/>

Answer 1

向需要该功能的每个元素添加特定的类。在我的示例中，此类为“图片”。

此外，您需要将图片的可拖动属性设置为false，否则在拖动时仍可以看到图片。

document.addEventListener('click', function(e) {
    if (e.target.classList.contains('image')) {
        e.target.style.filter = 'brightness(100%)';
    }
});

img.image {
    height: 100px;
    filter: brightness(0%);
}

<img class="image" src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/ draggable="false">
<img class="image" src="https://dictionary.cambridge.org/images/thumb/chick_noun_002_06563.jpg?version=4.0.44"/ draggable="false">

切换图像以HTML隐藏/可见

1 个答案: