Làm cách nào để tìm hiểu xem một phần tử có bị ẩn bằng JavaScript hay không?

Để tìm hiểu xem một phần tử có bị ẩn với JavaScript hay không, mã như sau -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .hiddenDiv {
      width: 100%;
      padding: 20px;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
      display: none;
      font-size: 20px;
   }
   .showBtn {
      border: none;
      padding: 15px;
      font-size: 18px;
      background-color: rgb(86, 25, 155);
      color: white;
   }
</style>
</head>
<body>
<h1>Find hidden element using JavaScript</h1>
<h2>Click on the below button to display hidden element</h2>
<button class="showBtn">Show element</button>
<div class="hiddenDiv">
This is a DIV element
</div>
<script>
   document.querySelector(".showBtn").addEventListener("click", showHidden);
   function showHidden() {
      var x = document.querySelector(".hiddenDiv");
      if (window.getComputedStyle(x).display === "none") {
         x.style.display = "block";
      }
   }
</script>
</body>
</html>