Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mengubah Sifat CSS Secara Dinamik Menggunakan JavaScript untuk Togol Keterlihatan Elemen pada Hover?
Bagaimanakah Saya Boleh Mengubah Sifat CSS Secara Dinamik Menggunakan JavaScript untuk Togol Keterlihatan Elemen pada Hover?
- Mary-Kate Olsenasal
- 2024-12-24 03:12:14272semak imbas
Mengubah suai Sifat CSS dengan JavaScript
Dalam bidang pembangunan web, anda mungkin sering menghadapi situasi di mana anda perlu menukar rupa atau gelagat elemen secara dinamik berdasarkan pengguna interaksi. Satu senario sedemikian ialah apabila anda ingin menjadikan elemen tertentu kelihatan atau tidak kelihatan semasa melayang. Dalam artikel ini, kami akan meneroka teknik berasaskan JavaScript untuk mencapai kesan ini dengan memanipulasi sifat CSS.
Menukar Sifat CSS Menggunakan JavaScript
Untuk menukar sifat CSS menggunakan JavaScript, kami boleh mengakses sifat gaya elemen. Sifat ini membolehkan kami membaca dan mengubah suai gaya elemen secara langsung. Pertimbangkan contoh berikut:
document.getElementById("element").style.property = "new value";
Kod ini menukar sifat CSS elemen dengan id "elemen" kepada "nilai baharu."
Keterlihatan Menogol pada Tuding
Mari gunakan teknik ini pada senario khusus kami, di mana kami ingin memaparkan elemen tersembunyi apabila elemen pencetusnya dilegarkan. Dalam HTML kami, kami mempunyai dua
<div class="left">Hello</div> <div class="center"> <div class="left1">
JavaScript kami kemudian menggunakan pendengar acara untuk mencetuskan togol keterlihatan:
// Get the trigger elements
const left = document.querySelector(".left");
const right = document.querySelector(".right");
// Define a function to toggle visibility
const toggleVisibility = (element) => {
element.querySelector("div").style.display = "block";
};
// Add event listeners
left.addEventListener("mouseenter", () => toggleVisibility(left));
left.addEventListener("mouseleave", () => toggleVisibility(left));
right.addEventListener("mouseenter", () => toggleVisibility(right));
right.addEventListener("mouseleave", () => toggleVisibility(right));
Dalam kod ini, fungsi toggleVisibility menukar sifat paparan < bersarang ;div> untuk "sekat" untuk menjadikannya kelihatan. Pendengar acara pada elemen pencetus mendengar acara tuding tetikus dan memanggil fungsi toggleVisibility dengan sewajarnya.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Sifat CSS Secara Dinamik Menggunakan JavaScript untuk Togol Keterlihatan Elemen pada Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!