如何在JavaScript中实现发票印章的显示/隐藏切换功能

原代码问题分析 #

• JavaScript方法名错误：document.getElementByClassName是拼写错误，正确写法为document.getElementsByClassName（注意复数Elements），且该方法返回元素集合，无法直接单个操作样式。
• 选择器覆盖不全：印章所在div有两种布局类（col-xs-4 和 col-xs-4 col-xs-offset-8），原代码只针对后者，漏掉了第一种情况的印章容器。
• 元素定位不精准：依赖Bootstrap布局类作为选择器，容易和页面其他同class元素冲突，导致误操作。

修复步骤 #

1. 修改PHP代码，给印章容器添加专属class #

给所有包含印章的div加上统一的stamp-container class，确保精准定位：

<?php
    $etat_footer .= "<div class=\"col-xs-4 stamp-container\">";
    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>";
    }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 stamp-container\">";
    
      $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>";
  }
}
?>

2. 修复JavaScript代码 #

修正方法名，处理元素集合，确保逻辑覆盖所有印章容器：

<script>
function myFunction() {
  // 获取所有印章容器元素
  var stampContainers = document.getElementsByClassName("stamp-container");
  // 遍历集合处理每个元素
  for (var i = 0; i < stampContainers.length; i++) {
    var container = stampContainers[i];
    container.style.display = container.style.display === "none" ? "block" : "none";
  }
}
</script>

3. （可选）优化按钮事件绑定 #

避免全局函数污染，用事件监听替代内联onclick：

<button id="toggleStampBtn">Hide/Show Stamp</button>

<script>
document.getElementById('toggleStampBtn').addEventListener('click', function() {
  var stampContainers = document.getElementsByClassName("stamp-container");
  for (var i = 0; i < stampContainers.length; i++) {
    stampContainers[i].style.display = stampContainers[i].style.display === 'none' ? 'block' : 'none';
  }
});
</script>

额外提示 #

如果打印/PDF生成工具对样式优先级有要求，建议用CSS类控制显示隐藏，比行内样式更可靠：

.stamp-hidden {
  display: none !important;
}

修改JS逻辑为切换类：

document.getElementById('toggleStampBtn').addEventListener('click', function() {
  var stampContainers = document.getElementsByClassName("stamp-container");
  for (var i = 0; i < stampContainers.length; i++) {
    stampContainers[i].classList.toggle('stamp-hidden');
  }
});

内容的提问来源于stack exchange，提问作者Dj8lacko