如何修改显示/隐藏按钮代码以针对Class而非ID生效？

我在WordPress中用Elementor搭建页面，原本针对ID实现显示/隐藏的代码可以正常运行，但改成针对Class后就失效了，以下是具体代码和解决方法：

原ID版本可正常运行代码 #

按钮代码：

<button onclick="myFunction()">show / hide</button>

JS逻辑代码：

function myFunction() {
  var x = document.getElementById("showprice");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
} 

修改为Class后的失效代码 #

function myFunction() {
  var x = document.getElementsByClassName("showprice");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
} 

问题原因 #

getElementsByClassName()返回的是HTMLCollection元素集合，不是单个DOM元素，不能直接通过.style访问样式属性，这就是代码失效的核心原因。

解决方法 #

方案1：批量控制所有Class匹配元素 #

如果需要同时控制所有带showprice类的元素，遍历集合逐个处理：

function myFunction() {
  var elements = document.getElementsByClassName("showprice");
  for (var i = 0; i < elements.length; i++) {
    var elem = elements[i];
    if (elem.style.display === "none") {
      elem.style.display = "block";
    } else {
      elem.style.display = "none";
    }
  }
}

方案2：控制单个Class匹配元素 #

如果页面中只有一个目标元素，用querySelector()直接获取第一个匹配的元素：

function myFunction() {
  var x = document.querySelector(".showprice");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

优化：处理CSS类设置的样式 #

如果元素的display是通过CSS类（而非内联style）设置的，用window.getComputedStyle()获取实际生效的样式：

function myFunction() {
  var elements = document.getElementsByClassName("showprice");
  for (var i = 0; i < elements.length; i++) {
    var elem = elements[i];
    var currentDisplay = window.getComputedStyle(elem).display;
    if (currentDisplay === "none") {
      elem.style.display = "block";
    } else {
      elem.style.display = "none";
    }
  }
}

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