首頁 > web前端 > css教學 > 如何將兩個 CSS 類別應用到單一元素?

如何將兩個 CSS 類別應用到單一元素?

王林
發布: 2023-09-16 18:33:03
轉載
1136 人瀏覽過

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

透過使用 class 屬性並用空格分隔每個類,我們可以將多個 CSS 類別套用到單一元素。

方法

有兩種方法可以將兩個 CSS 類別應用到單一元素 -

  • 使用類別屬性 -

#
<div class="class1 class2">This element has two CSS classes applied to it</div>
登入後複製
  • 使用 JavaScript −

#鑑於有一個帶有id為'paragraph'的p標籤,我們想要應用這些類別 -

<script>
   const paragraph = document.getElementById('paragraph');
   paragraph.classList.add('one');
   paragraph.classList.add('two');
</script>
登入後複製

範例

<!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>
登入後複製

說明

  • 將上述程式碼保存在副檔名為 .html 的檔案中。

  • 在網頁瀏覽器中開啟檔案。

以上是如何將兩個 CSS 類別應用到單一元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板