Apa gunanya atribut tersembunyi di javascript?

Question

Atribut global tersembunyi di HTML5 adalah atribut Boolean. Ini menetapkan bahwa elemen yang ditargetkan lebih relevan atau tidak untuk dokumen HTML. Salah satu contoh penggunaan atribut tersembunyi adalah dapat digunakan untuk menutupi/mengungkap konten tertentu yang ada di halaman web HTML yang tidak diotorisasi kecuali pengguna telah diautentikasi. Sampai saat itu, browser tidak akan merender elemen dengan properti tersembunyi aktif (mis. e. atribut ditetapkan)

Table of Contents Show

Penggunaan Atribut Tersembunyi
Contoh Elemen Sembunyikan HTML
Poin Penting untuk Diingat
Artikel yang Direkomendasikan
Bagaimana Anda menggunakan tersembunyi di JavaScript?
Bagaimana cara menambahkan atribut tersembunyi di JavaScript?
Apa perbedaan antara tidak menampilkan dan atribut tersembunyi?
Apa itu hide() di JavaScript?

Penggunaan Atribut Tersembunyi

Salah satu penggunaan atribut tersembunyi seperti menjauhkan pengguna dari melihat elemen sampai beberapa kondisi terpenuhi (seperti memilih tombol radio, dll. ) setelah itu, kode JavaScript dapat menetapkan kembali atribut tersembunyi, sehingga membuat elemen terlihat. Atribut ini tidak boleh digunakan untuk menyembunyikan konten hanya untuk presentasi individu;

Konten yang disembunyikan tidak boleh dikaitkan dengan konten yang diperlihatkan atau konten turunan dari konten tersembunyi yang belum aktif. Ini memastikan bahwa elemen formulir masih dapat dikirimkan dan elemen skrip masih dapat dijalankan. Namun, Skrip dan Elemen dapat merujuk ke konten apa pun yang disembunyikan dalam beberapa konteks lain

It would be totally incorrect to utilize the attribute in a real-world scenario to connect to a section pronounced with a hidden attribute. If the linked content is neither relevant nor applicable, then there is no need to pack them together. As per the definition of the Hidden attribute, we can hide any content present within an HTML webpage using the hidden attribute and then JavaScript code can be used to access it afterwards. Target to hide an element can also be achieved by CSS with the property as display property (i.e. setting it to none) but using the hidden attribute is an easy approach.

Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda

Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya

Catatan. Mengubah nilai properti tampilan CSS pada elemen dengan atribut tersembunyi akan menggantikan perilakunya. Misalnya, elemen ditata sebagai tampilan. flex akan ditampilkan meskipun ada atribut tersembunyi

Sintaksis

<element hidden> </element>

Contoh Elemen Sembunyikan HTML

Diberikan di bawah ini adalah contoh HTML Hide Element

Contoh 1

Kode

<!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>

_

Keluaran

Contoh #2

Kode

<!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>

Keluaran

Contoh #3 – Kegunaan Atribut

Sesuai definisi atribut Tersembunyi, kita dapat menyembunyikan konten apa pun yang ada di dalam halaman web HTML menggunakan atribut tersembunyi dan kemudian kode JavaScript dapat digunakan untuk mengaksesnya setelah itu. Target untuk menyembunyikan suatu elemen juga dapat dicapai oleh CSS dengan properti sebagai properti tampilan (mis. e. menyetelnya menjadi tidak ada) tetapi menggunakan atribut tersembunyi adalah pendekatan yang mudah. Oleh karena itu, kita dapat mengatakan bahwa konten dengan atribut tersembunyi adalah bagian dari DOM, tetapi pengguna tidak dapat mengaksesnya

In the below example, we’ll pick the part of a hidden element using JavaScript code:

Paket Pengembangan Perangkat Lunak Semua dalam Satu(600+ Kursus, 50+ proyek)

Harga
Lihat Kursus

600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 (86.502 peringkat)

Kode

<!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>

Keluaran

Poin Penting untuk Diingat

Ini adalah beberapa poin penting yang harus diketahui sebelum berinteraksi dengan atribut tersembunyi

Konten yang dapat diakses pada resolusi diskrit dan ukuran layar tidak boleh menggunakan atribut tersembunyi untuk menyembunyikan konten
Atribut tersembunyi tidak boleh diuntungkan untuk menyembunyikan/menutupi bagian yang tidak terlihat dari pengalih konten atau komponen tab
Elemen non-tersembunyi tidak boleh di-hyperlink ke elemen tersembunyi
Elemen yang ditandai sebagai tersembunyi masih berpotensi aktif
Jika Anda ingin menyembunyikan konten dari semua pengguna, gunakan atribut tersembunyi HTML5 (bersama dengan tampilan CSS. none untuk browser yang belum mendukung tersembunyi). Tidak perlu menggunakan aria-hidden

Kesimpulan

Disebutkan di bawah ini adalah beberapa poin kunci utama yang harus Anda ingat dari topik ini

Kasus penggunaan yang cocok untuk atribut tersembunyi termasuk

Konten yang belum relevan tetapi mungkin dibutuhkan nanti
Konten yang digunakan sebelumnya tetapi tidak diperlukan lagi
Konten yang dapat digunakan kembali dan digunakan oleh berbagai bagian halaman lainnya dengan gaya seperti template
Membuat kanvas di luar layar sebagai penyangga gambar

Kasus penggunaan atribut tersembunyi yang tidak sesuai termasuk

Menyembunyikan panel di dalam kotak dialog bertab
Menyembunyikan konten dalam presentasi individu sementara bermaksud agar terlihat di orang lain

Catatan. Elemen yang disembunyikan tidak boleh ditautkan dengan elemen lain yang tidak disembunyikan sampai mereka terkait

Artikel yang Direkomendasikan

Ini adalah panduan untuk HTML Hide Element. Di sini kita membahas pengenalan, penggunaan atribut tersembunyi, dan contoh elemen sembunyikan HTML. Anda juga dapat melihat artikel berikut untuk mempelajari lebih lanjut –

Bagaimana Anda menggunakan tersembunyi di JavaScript?

Properti tampilan gaya digunakan untuk menyembunyikan atau menampilkan konten DOM HTML dengan mengakses elemen DOM menggunakan JavaScript/jQuery. Untuk menyembunyikan elemen, setel properti tampilan gaya ke “none” . dokumen. getElementById("elemen").

Bagaimana cara menambahkan atribut tersembunyi di JavaScript?

Dalam JavaScript, kita bisa menyembunyikan elemen menggunakan gaya. tampilan atau dengan menggunakan gaya. visibilitas . Properti visibilitas dalam JavaScript juga digunakan untuk menyembunyikan elemen.

Apa perbedaan antara tidak menampilkan dan atribut tersembunyi?

Perbedaan antara tampilan. tidak ada dan visibilitas. tersembunyi . hidden menyembunyikan elemen, tetapi tetap memakan ruang di tata letak. tampilan. tidak ada yang menghapus elemen dari dokumen. Itu tidak memakan ruang apa pun.

Apa itu hide() di JavaScript?

Metode hide() menyembunyikan elemen yang dipilih . Tip. Ini mirip dengan tampilan properti CSS. tidak ada. Catatan. Elemen tersembunyi tidak akan ditampilkan sama sekali (tidak lagi memengaruhi tata letak halaman).

kode javascript