Comment appliquer deux classes CSS à un seul élément ?-tutoriel CSS-php.cn

Comment appliquer deux classes CSS à un seul élément ?

王林

Libérer： 2023-09-16 18:33:03

avant

984 Les gens l'ont consulté

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

Nous pouvons appliquer plusieurs classes CSS à un seul élément en utilisant l'attribut class et en séparant chaque classe par un espace.

Méthode

Il existe deux façons d'appliquer deux classes CSS à un seul élément -

Utilisez les attributs de classe -

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

Copier après la connexion

Utiliser JavaScript −

Étant donné qu'il existe une balise p avec l'identifiant 'paragraphe', nous souhaitons appliquer ces classes -

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

Copier après la connexion

Exemple

<!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>

Copier après la connexion