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:031131semak imbas
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!
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?