Cara Menemukan Elemen Tersembunyi Pada Sebuah Fungsi

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 2, 2021

Dibawah ini kita akan mempelajari cara mengetahui suatu elemen yang disembunyikan dengan JavaScript.

Periksa Elemen Tersembunyi

Contoh
Jika elemen <div> tersembunyi, maka gunakan kode di bawah ini untuk mengatahuinya :

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display === "none") {
   x.style.display = "block";
  }
}

Akan jadi seperti di bawah ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: Blue;
  margin-top: 20px;
  display: none;
}
</style>
</head>
<body>

<p>Klik tombol di bawah ini untuk mengetahui apakah ada elemen DIV yang tersembunyi? Jika ya, tampilkan.</p>

<button onclick="myFunction()">Test</button>

<div id="myDIV">
Elemen div yang disembunyikan.
</div>

<p>Teks yang terlihat...</p>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display === "none") {
    x.style.display = "block";
  }
}
</script>

</body>
</html>

Catatan: Ketika sebuah elemen disembunyikan dengan display: none (seperti pada contoh di atas) aka elemen tidak akan memakan ruang yang ada.

Untuk mengetahui sebuah elemen yang disembunyikan dengan visibility: hidden maka lihat contoh di bawah ini. Elemen “tersembunyi” ini akan memakan tempat.

Contoh

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).visibility === "hidden") {
    x.style.visibility = "visible";
  }
}

menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: gold;
  margin-top: 20px;
  visibility: hidden;
}
</style>
</head>
<body>

<p>Klik tombol di bawah ini untuk mengetahui apakah ada elemen DIV yang tersembunyi? Jika ya, tampilkan.</p>

<button onclick="myFunction()">Test</button>

<div id="myDIV">
Elemen div yang disembunyikan.
</div>

<p>Teks yang terlihat...</p>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).visibility === "hidden") {
    x.style.visibility = "visible";
  }
}
</script>

</body>
</html>