Atribut global tersembunyi dalam HTML5 ialah atribut Boolean. Ia menetapkan bahawa elemen yang disasarkan adalah lebih relevan atau tidak untuk dokumen HTML. Satu contoh penggunaan atribut tersembunyi ialah ia boleh digunakan untuk menutup/mendedahkan mana-mana kandungan tertentu yang terdapat pada halaman web HTML yang tidak dibenarkan melainkan pengguna telah disahkan. Sehingga itu, penyemak imbas tidak akan memaparkan elemen dengan sifat tersembunyi aktif (iaitu atribut ditetapkan).
Satu penggunaan atribut tersembunyi sedemikian boleh seperti menghalang pengguna daripada melihat elemen sehingga beberapa syarat telah dipenuhi (seperti memilih butang radio, dsb.) selepas itu, kod JavaScript boleh menetapkan kembali atribut tersembunyi , dengan itu menjadikan elemen itu kelihatan. Atribut ini tidak boleh digunakan untuk menyembunyikan kandungan hanya untuk persembahan individu; sebaliknya, ia harus kekal dalam keadaan yang sama untuk semua pembentangan jika mana-mana kandungan disembunyikan.
Kandungan yang disembunyikan tidak boleh dikaitkan dengan kandungan tidak tersembunyi atau kandungan yang turunan kepada kandungan tersembunyi yang masih aktif. Ini memastikan elemen borang masih boleh diserahkan dan elemen skrip belum boleh dilaksanakan. Skrip dan Elemen boleh, walau bagaimanapun, merujuk kepada mana-mana kandungan yang tersembunyi dalam beberapa konteks lain.
Adalah tidak betul untuk menggunakan
Sintaks
<element hidden> </element>
Diberikan di bawah adalah contoh Elemen Sembunyikan HTML:
Kod:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
</body>
</html>Output:
Kod:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">TOGGLE HIDDEN ELEMENTS</button>
<p id="p" hidden>This paragraph uses HTML5's <code>hidde</code> element.</p>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false);
</script>
</body>
</html>Output:
Mengikut takrifan atribut Tersembunyi, kami boleh menyembunyikan sebarang kandungan yang terdapat dalam halaman web HTML menggunakan atribut tersembunyi dan kemudian kod JavaScript boleh digunakan untuk mengaksesnya selepas itu. Sasaran untuk menyembunyikan elemen juga boleh dicapai oleh CSS dengan sifat sebagai sifat paparan (iaitu menetapkannya kepada tiada) tetapi menggunakan atribut tersembunyi adalah pendekatan yang mudah. Oleh itu, kita boleh mengatakan bahawa kandungan dengan atribut tersembunyi ialah kepingan DOM, tetapi pengguna tidak boleh mengaksesnya.
Dalam contoh di bawah, kami akan memilih
Kod:
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">DISPLAY HIDDEN TEXT</button>
<output id="op">(Hidden text will appear here)</output>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false);
</script>
</body>
</html>Output:
Ini adalah beberapa perkara penting yang harus diketahui sebelum berinteraksi dengan atribut tersembunyi:
Di bawah disebutkan adalah beberapa perkara utama yang perlu anda ingat daripada topik ini.
Kes penggunaan yang sesuai untuk atribut tersembunyi termasuk:
Kes penggunaan atribut tersembunyi yang tidak sesuai termasuk:
Atas ialah kandungan terperinci Elemen Sembunyikan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
