Bagaimana untuk menunjukkan dan menyembunyikan dalam javascript

JavaScript ialah bahasa skrip yang digunakan secara meluas yang boleh digunakan untuk menambah interaktiviti dan dinamik pada halaman web. Dalam kebanyakan tapak web, adalah perkara biasa untuk perlu menunjukkan atau menyembunyikan elemen atau kandungan tertentu berdasarkan tindakan pengguna. JavaScript ialah teknologi yang sangat sesuai untuk tugasan ini.

Berikut ialah beberapa kaedah tentang cara menggunakan JavaScript untuk menunjukkan atau menyembunyikan unsur atau kandungan, serta kebaikan dan keburukan penggunaannya.

1. Cara tradisional untuk menunjukkan dan menyembunyikan elemen

Dalam versi JavaScript yang lebih awal, cara tradisional untuk menunjukkan dan menyembunyikan elemen adalah dengan mengubah suai atribut "gaya". Anda boleh menukar keterlihatan elemen dengan menukar atribut "paparan"nya. Apabila atribut "paparan" ditetapkan kepada "tiada", elemen itu disembunyikan apabila ditetapkan kepada "sekat", elemen itu dipaparkan. Berikut ialah contoh:

<script>
    function showDiv() {
        document.getElementById("myDiv").style.display = "block";
    }

    function hideDiv() {
        document.getElementById("myDiv").style.display = "none";
    }
</script>

<div id="myDiv">
    This is my hidden div.
</div>

<button onclick="showDiv()">Show the div</button>
<button onclick="hideDiv()">Hide the div</button>

Dalam kod di atas, kami menggunakan fungsi getElementById JavaScript untuk mendapatkan elemen myDiv, dan kemudian mengubah suai fungsi showDiv dan hideDivAtribut untuk menunjukkan atau menyembunyikan elemen. display

Kelebihan kaedah ini ialah ia mudah dan mudah difahami, serta sesuai untuk situasi di mana jQuery atau perpustakaan JavaScript lain tidak tersedia. Tetapi kelemahannya ialah ia tidak dapat mengawal animasi elemen dengan lancar, anda hanya boleh melihatnya menunjukkan atau bersembunyi.

Gunakan jQuery untuk menunjukkan dan menyembunyikan elemen

jQuery ialah perpustakaan JavaScript yang biasa digunakan. Ia boleh memudahkan tugas pengekodan seperti ini. Dengan kod berikut, kita boleh menyembunyikan dan menunjukkan elemen menggunakan fungsi

dan hide() dalam jQuery: show()

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function showDiv() {
        $("#myDiv").show();
    }

    function hideDiv() {
        $("#myDiv").hide();
    }
</script>

<div id="myDiv">
    This is my hidden div.
</div>

<button onclick="showDiv()">Show the div</button>
<button onclick="hideDiv()">Hide the div</button>

Dalam kod di atas, kami menyembunyikan dan menunjukkan elemen dengan menggunakan

dan show() berfungsi dalam jQuery hide() fungsi untuk menunjukkan atau menyembunyikan elemen myDiv. Kaedah ini bukan sahaja menunjukkan atau menyembunyikan elemen dengan lancar, tetapi kerana jQuery lebih difahami dan lebih mudah dibaca daripada JavaScript mentah, kaedah ini mengatasi kaedah lain dari segi kebolehbacaan dan kebolehselenggaraan kod eksplisit.

3. Gunakan kelas CSS untuk menunjukkan dan menyembunyikan elemen

Dalam CSS, anda boleh menggunakan kelas untuk menentukan gaya. Dalam JavaScript, anda boleh menukar kelas elemen menggunakan atribut classList dan kaedah add() dan remove(). Kelebihannya ialah ia boleh mengawal keadaan paparan elemen tanpa mengubah atribut stylenya.

Berikut ialah contoh:

<script>
    function toggleDiv() {
        var myDiv = document.getElementById("myDiv");
        myDiv.classList.toggle("hidden");
    }
</script>

<style>
    .hidden {
        display: none;
    }
</style>

<div id="myDiv">
    This is my div.
</div>

<button onclick="toggleDiv()">Toggle the div</button>

Dalam coretan kod di atas, kami mentakrifkan kelas CSS "tersembunyi" yang menetapkan atribut "paparan" elemen kepada "tiada" , dan menggunakan classList atribut dan toggle() kaedah untuk menambah atau mengalih keluar kelas. Apabila butang diklik, kelas "tersembunyi" bagi elemen myDiv akan ditambah atau dialih keluar, dengan itu mengawal paparan atau keadaan tersembunyi elemen tersebut.

Kelebihan pendekatan ini ialah anda tidak perlu menulis gaya dalam JavaScript, membenarkan pemisahan HTML/CSS yang baik. Kelemahannya ialah bagi pembangun yang tidak biasa dengan HTML dan CSS, ia mungkin memerlukan lebih banyak pembelajaran.

4. Gunakan animasi CSS untuk menunjukkan dan menyembunyikan elemen

Selain menggunakan JavaScript, anda juga boleh menggunakan animasi CSS untuk menunjukkan dan menyembunyikan elemen. Pendekatan ini membolehkan kawalan lancar untuk menunjukkan atau menyembunyikan peralihan untuk mencipta pengalaman pengguna yang lebih elegan.

Berikut ialah contoh:

<style>
    #myDiv {
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
        /* 设置 opacity 过渡时间为0.5秒，以及其中断点的加速度 */
        visibility: visible;
    }
    #myDiv.hidden {
        opacity: 0;
        visibility: hidden;
    }
</style>

<script>
    function toggleDiv() {
        var myDiv = document.getElementById("myDiv");
        myDiv.classList.toggle("hidden");
    }
</script>

<div id="myDiv">
    This is my div.
</div>

<button onclick="toggleDiv()">Toggle the div</button>

Dalam kod di atas, kami menggunakan animasi CSS untuk menukar sifat "opacity" elemen untuk mencapai peralihan yang lancar. Kami juga memastikan bahawa elemen myDiv tidak mengambil ruang apabila ia disembunyikan dengan menggunakan atribut "keterlihatan". Gunakan classList dalam JavaScript untuk mengawal penambahan atau pengalihan keluar kelas "tersembunyi".

Kelebihan kaedah ini ialah ia boleh mencipta kesan peralihan yang lebih baik untuk meningkatkan pengalaman pengguna. Kelemahannya ialah melaksanakannya memerlukan lebih banyak kod, walaupun untuk pembangun berpengalaman. Kaedah ini mungkin lebih membosankan.

Ringkasan

Apabila menggunakan JavaScript, terdapat banyak cara untuk mengawal keadaan paparan unsur. Kaedah tradisional boleh mengawal paparan atau penyembunyian elemen dengan lancar dengan menggunakan kelas jQuery dan CSS boleh memudahkan untuk mengawal dan mengekalkan kod menggunakan animasi CSS boleh mencipta kesan peralihan yang lebih lancar dan elegan. Apabila memilih kaedah yang hendak digunakan, ia perlu ditimbang dan dipilih berdasarkan masalah khusus dan keperluan individu.

Atas ialah kandungan terperinci Bagaimana untuk menunjukkan dan menyembunyikan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!