如何隐藏和显示二维码

如何隐藏和显示二维码

在网页上嵌入二维码是非常方便的，但如果直接显示出来可能会影响页面的美观度。这时候我们就可以将二维码隐藏起来，只在需要的时候显示出来，以达到较好的效果。

1. 利用CSS实现二维码的隐藏和显示

利用CSS中的display属性，我们可以很方便地实现二维码的隐藏和显示，代码如下：

.qrcode{
  display:none;
}
.qrcode-show{
  display:block;
}

在HTML中，我们需要给二维码图片添加一个class为“qrcode”的属性，并在需要显示的地方再添加一个class为“qrcode-show”的属性。代码如下：

<div class="qrcode">
  <img src="qrcode.png"/>
div>

<button onclick="showQrcode()">显示二维码button>

<script>
  function showQrcode(){
    document.querySelector('.qrcode').classList.add('qrcode-show');
  }
script>

这样，点击“显示二维码”按钮后，即可在页面上看到二维码的效果。

2. 利用JavaScript实现二维码的隐藏和显示

除了CSS，我们也可以利用JavaScript来实现二维码的隐藏和显示。代码如下：

<div id="qrcode">
  <img src="qrcode.png"/>
div>

<button onclick="showQrcode()">显示二维码button>

<script>
  function showQrcode(){
    document.querySelector('#qrcode').style.display = 'block';
  }
script>

同样地，在HTML中我们在需要显示的地方添加一个id为“qrcode”的属性，并在JavaScript中通过修改style来实现显示的效果。