Bagaimana untuk Mengubah Suai Gaya CSS Secara Dinamik dengan Pendengar Acara JavaScript?

Cara Mengubah Suai Gaya CSS secara Dinamik dengan JavaScript

Untuk menukar sifat CSS unsur secara dinamik menggunakan JavaScript, beberapa kaedah boleh digunakan. Salah satu pendekatan yang paling serba boleh ialah menggunakan sifat gaya elemen. Sifat ini menyediakan akses kepada semua gaya sebaris yang ditakrifkan untuk elemen.

Pertimbangkan coretan HTML dan CSS berikut:

<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">
<pre class="brush:php;toolbar:false">.left,
.right {
  margin: 10px;
  float: left;
  border: 1px solid red;
  height: 60px;
  width: 60px;
}

.left:hover,
.right:hover {
  border: 1px solid blue;
}

.center {
  float: left;
  height: 60px;
  width: 160px;
}

.center .left1,
.center .right1 {
  margin: 10px;
  float: left;
  border: 1px solid green;
  height: 60px;
  width: 58px;
}

Dalam coretan ini, kami mempunyai tiga elemen (kiri, tengah, dan kanan), masing-masing dengan kelas yang berbeza. Apabila elemen kiri atau kanan dilegar, ia menukar warna jidarnya kepada biru.

Untuk menjadikan elemen kiri1 muncul apabila kiri dilegar dan kanan1 apabila kanan dilegar, kita boleh menggunakan JavaScript:

document.querySelector('.left').addEventListener('mouseenter', () => {
  document.querySelector('.left1').style.display = 'block';
});

document.querySelector('.left').addEventListener('mouseleave', () => {
  document.querySelector('.left1').style.display = 'none';
});

document.querySelector('.right').addEventListener('mouseenter', () => {
  document.querySelector('.right1').style.display = 'block';
});

document.querySelector('.right').addEventListener('mouseleave', () => {
  document.querySelector('.right1').style.display = 'none';
});

Dalam kod JavaScript ini, kami menggunakan kaedah addEventListener untuk melampirkan pendengar acara pada elemen kiri dan kanan untuk acara mouseenter dan mouseleave. Apabila tetikus memasuki elemen, elemen tersembunyi yang sepadan akan kelihatan dengan menukar gaya paparannya kepada menyekat. Apabila tetikus meninggalkan elemen, elemen tersembunyi sekali lagi disembunyikan.

Menggunakan sifat gaya untuk menukar sifat CSS secara dinamik memberi anda fleksibiliti yang hebat dalam mengubah suai penampilan elemen dalam halaman web anda.