ThiselementhastwoCSSclassesappliedtoit menggunakan JavaScript − Memandangkan terdapat teg p dengan id 'perenggan', kami Mahu untuk menggunakan kelas ini -
cari

Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menggunakan dua kelas CSS kepada satu elemen?

Bagaimana untuk menggunakan dua kelas CSS kepada satu elemen?

王林
王林ke hadapan
2023-09-16 18:33:031140semak imbas

如何将两个 CSS 类应用到单个元素？

Kita boleh menggunakan berbilang kelas CSS pada satu elemen dengan menggunakan atribut kelas dan memisahkan setiap kelas dengan ruang.

kaedah

Terdapat dua cara untuk menggunakan dua kelas CSS pada satu elemen -

  • Gunakan atribut kelas -

<div class="class1 class2">This element has two CSS classes applied to it</div>

  • Gunakan JavaScript −

Memandangkan terdapat tag p dengan id 'perenggan', kami ingin memohon kelas ini -

<script>
   const paragraph = document.getElementById('paragraph');
   paragraph.classList.add('one');
   paragraph.classList.add('two');
</script>

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Classes</title>
   <style>
      .one {
         color: red;
      }
      .two {
         font-size: 24px;
      }
   </style>
</head>
   <body>
      <p class = "one two">Using Class Attribute</p>
      <p id = 'paragraph'>Using JavaScript</p>
      <script>
         const paragraph = document.getElementById('paragraph');
         paragraph.classList.add('one');
         paragraph.classList.add('two');
      </script> 
   </body>
</html>

Penerangan

  • Simpan kod di atas dalam fail dengan sambungan .html.

  • Buka fail dalam pelayar web.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan dua kelas CSS kepada satu elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html class
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Apakah kegunaan sifat sebelum asterisk dalam CSS?Artikel seterusnya：Apakah kegunaan sifat sebelum asterisk dalam CSS?

Artikel berkaitan

Lihat lagi