Rumah > Artikel > hujung hadapan web > Elemen Sembunyikan HTML
Elemen Sembunyikan HTML
- PHPzasal
- 2024-09-04 16:42:32522semak imbas
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).
Penggunaan Atribut Tersembunyi
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>
Contoh Elemen Sembunyikan HTML
Diberikan di bawah adalah contoh Elemen Sembunyikan HTML:
Contoh #1
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:
Contoh #2
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:
Contoh #3 – Kegunaan Atribut.
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:
Perkara Penting untuk Diingat
Ini adalah beberapa perkara penting yang harus diketahui sebelum berinteraksi dengan atribut tersembunyi:
- Kandungan yang boleh diakses pada resolusi diskret dan saiz skrin tidak boleh menggunakan atribut tersembunyi untuk menyembunyikan kandungan.
- Atribut tersembunyi tidak sepatutnya mendapat manfaat untuk menyembunyikan/menutup bahagian yang tidak kelihatan pada penukar kandungan atau komponen tab.
- Elemen bukan tersembunyi tidak seharusnya dipautkan kepada unsur tersembunyi.
- Elemen yang ditandai sebagai tersembunyi masih berpotensi aktif.
- Jika anda ingin menyembunyikan kandungan daripada semua pengguna, gunakan atribut tersembunyi HTML5 (bersama-sama paparan CSS: tiada untuk penyemak imbas yang belum menyokong tersembunyi). Tak perlu guna aria-hidden.
Kesimpulan
Di bawah disebutkan adalah beberapa perkara utama yang perlu anda ingat daripada topik ini.
Kes penggunaan yang sesuai untuk atribut tersembunyi termasuk:
- Kandungan yang belum relevan lagi tetapi mungkin diperlukan kemudian.
- Kandungan yang digunakan sebelum ini tetapi tidak diperlukan lagi.
- Kandungan yang boleh diguna semula dan digunakan oleh pelbagai bahagian lain halaman dalam cara seperti templat.
- Mencipta kanvas luar skrin sebagai penimbal lukisan.
Kes penggunaan atribut tersembunyi yang tidak sesuai termasuk:
- Menyembunyikan panel dalam kotak dialog bertab.
- Menyembunyikan kandungan dalam pembentangan individu sambil berniat untuk dilihat pada orang lain.
Atas ialah kandungan terperinci Elemen Sembunyikan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!