Rumah >hujung hadapan web >tutorial css >Bagaimanakah JavaScript Boleh Mengubah Sifat CSS Secara Dinamik untuk Mencipta Kesan Tuding pada Elemen Bersarang?
Bagaimanakah JavaScript Boleh Mengubah Sifat CSS Secara Dinamik untuk Mencipta Kesan Tuding pada Elemen Bersarang?
- Barbara Streisandasal
- 2024-12-18 13:01:11696semak imbas
Memahami Sifat CSS Mengubah Secara Dinamik dengan JavaScript
Dengan kemunculan pembangunan web moden, selalunya perlu mengubah suai persembahan visual elemen secara dinamik sebagai tindak balas kepada interaksi pengguna atau keadaan tertentu. JavaScript menawarkan penyelesaian yang berkuasa untuk mencapai perkara ini dengan memanipulasi sifat CSS secara pengaturcaraan.
Objektif: Melaksanakan Kesan Hover pada Elemen Bersarang
Dalam senario yang anda sediakan, anda berhasrat untuk mendedahkan tersembunyi
Langkah 1: Fahami Sifat Gaya
Kunci untuk mengubah sifat CSS menggunakan JavaScript terletak pada sifat gaya. Ia menyediakan akses terus kepada penggayaan sebaris elemen, membolehkan anda memanipulasi pelbagai atribut, termasuk jidar, warna dan tetapan paparan.
Langkah 2: Memanipulasi Gaya Sempadan
Untuk menukar sempadan elemen apabila ia dilegar, anda boleh menggunakan yang berikut sintaks:
document.getElementById("elementId").style.border = "3px solid #FF0000";
Kod ini menetapkan sempadan elemen dengan ID yang ditentukan kepada sempadan merah pepejal selebar 3 piksel.
Langkah 3: Mengubah Suai Tetapan Paparan
Dalam kes anda, anda ingin membuat
document.getElementById("hiddenElementId").style.display = "block";
Kod ini menetapkan sifat paparan elemen tersembunyi kepada "sekat", menjadikannya kelihatan.
Langkah 4 : Menggabungkan Semuanya
Untuk melaksanakan kesan tuding pada elemen bersarang anda, anda boleh menggunakan yang berikut skrip:
var left1 = document.querySelector(".left1");
var right1 = document.querySelector(".right1");
var leftElement = document.querySelector(".left");
leftElement.addEventListener("mouseover", function() {
left1.style.display = "block";
});
leftElement.addEventListener("mouseout", function() {
left1.style.display = "none";
});
var rightElement = document.querySelector(".right");
rightElement.addEventListener("mouseover", function() {
right1.style.display = "block";
});
rightElement.addEventListener("mouseout", function() {
right1.style.display = "none";
});
Skrip ini mengubah suai sifat paparan elemen tersembunyi untuk menjadikannya kelihatan apabila elemen kelihatan yang sepadan diletakkan di atasnya.
Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Mengubah Sifat CSS Secara Dinamik untuk Mencipta Kesan Tuding pada Elemen Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!