javascript - 隐藏/显示所有图像切换按钮

Question

我需要创建一个切换按钮隐藏/显示。当我按下它时，网站上的所有图像必须消失，当我再次按下它时，所有图像必须再次出现。

Answer 1

这是简短的代码示例。

单击按钮时，检查 body 是否有 class="hide" 并添加/删除此类。然后在 CSS 中，主体内的图像被 class="hide" 隐藏。

<style>
    .hide img {display: none}
</style>

<p>p</p>
<p>abc</p>
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<button id="button">SHOW/HIDE</button>

<script>
    var button = document.getElementById('button');
    var body = document.body;

    button.onclick = function() {
        body.className = body.className == 'hide' ? '' : 'hide';
    }
</script>

https://jsfiddle.net/6ajr0e01/

它是纯 JS 解决方案，没有框架，无需迭代网站中的所有图像。它应该是最快的(之一)。