如何在 JavaScript 中切换（隐藏/显示）元素答案

【问题标题】：How to Toggle (Hide/Show) an Element in JavaScript如何在 JavaScript 中切换（隐藏/显示）元素
【发布时间】：2022-12-20 10:13:21
【问题描述】：

我有一个发票 webapp 并尝试在打印/保存 pdf 之前添加一个按钮来切换（隐藏/显示）发票戳但我无法让它发挥作用。

邮票部分：来自“.json”模板文件的来源

<?php
    $etat_footer .= "<div class=\"col-xs-4\">";
    if( trim($signature_stamp) != "" ){
      $etat_footer .= "<p style=\"text-align: center; border-bottom: 0px solid #666;\">
        <img src=\"".($signature_stamp)."\" style=\"max-width:1px; max-height:160px; margin-bottom:-1px;\" />
      </p>";
      ?>
      <?php
      
    }else{
      $etat_footer .= "<p>&nbsp;</p><p style=\"border-bottom: 0px solid #666;\">&nbsp;</p>";
    }
    $etat_footer .= "<p class='text-md-center'>".$signature_txt."</p>
    </div>";
  }else{
    $etat_footer .= "<div class=\"col-xs-4 col-xs-offset-8\">";
    
      $etat_footer .= "<p style=\"text-align: center; border-bottom: 0px solid #666;\">
        <img src=\"".($signature_stamp)."\" style=\"max-width:170px; max-height:160px; margin-bottom:-1px;\" />
      </p>";
    
    $etat_footer .= "<p class='text-md-center'>".$signature_txt."</p>
    </div>";
  }
}
?>

我尝试创建一个具有隐藏元素功能的按钮，但没有用：

<button onclick="myFunction()">Hide/Show Stamp</button>

Javascript

<script>
function myFunction() {
  var x = document.getElementByClassName("col-xs-4 col-xs-offset-8");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

【问题讨论】：

你确定getElementByClassName()存在吗？
这与PHP无关
什么不起作用？空白页？显示/隐藏了错误的元素？浏览器的 DevConsole 有任何错误吗？
@brombeer 单击按钮时没有任何反应。
浏览器的 DevConsole 中没有任何内容？ getElementByClassName打错了，是getElementsByClassName

标签： html function button show-hide

【解决方案1】：

两个注意事项：

您可能想使用 getElementsByClassName，因为默认情况下 getElementByClassName 不会减速。
如果您使用 getElementsByClassName，请不要忘记选择结果元素

参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

工作示例如下：

function myFunction() {
  var x = document.getElementsByClassName("col-xs-4 col-xs-offset-8");
  if (x[0].style.display === "none") {
    x[0].style.display = "block";
  } else {
    x[0].style.display = "none";
  }
}

<div class="col-xs-4 col-xs-offset-8">
STAMP
</div>
<button onclick="myFunction()">Hide/Show Stamp</button>

【讨论】：