HTML - class 屬性

HTML class 屬性用於為 HTML 元素指定一個類，可以在單個元素上指定多個類。透過利用該 class 屬性透過**CSS** 和**JavaScript** 選擇元素，我們可以設定樣式或更改該元素。

語法

   <tag class="classname"></tag>

屬性值

classname: classname 可以是您想要用來選擇該元素的任何內容。

嘗試點選圖示執行按鈕以執行以下 HTML 程式碼以檢視輸出。

HTML class 屬性示例

使用 class 屬性設定背景顏色

在此示例中，我們將使用 class 屬性，並在 css 中使用該類名來選擇該元素並將背景顏色設定為綠色並填充 5px。

<!DOCTYPE html>
<html>
<head>
   <style>
    /* Class Selector Used to Select the Element */
   .highlight {
       background-color: green;
       padding: 5px;
   }
   </style>
</head>
<body>
    <!-- HTML Class attribute used on p Element -->
   <p class="highlight">This is a highlighted paragraph.</p>
</body>
</html>

使用 class 屬性設定懸停效果

在此示例中，我們將使用 class 屬性，並在 CSS 中使用該類名來選擇該元素並在選定元素上設定懸停效果。

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Class Selector Used to Select the Element */
        .highlight:hover {
            background-color: green;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- HTML Class attribute used on p Element -->
    <p class="highlight">This is a highlighted paragraph.</p>
</body>
</html>

使用 class 屬性在 JavaScript 中設定背景顏色

在此示例中，我們將使用 class 屬性，並在 JavaScript 中使用該類名來選擇該元素並將背景顏色設定為綠色並填充 5px。

<!DOCTYPE html>
<html>
   <head>
      <script>
         /* Class Selector Used to Select the Element */
         function myFunction() {
         let x = document.getElementsByClassName("highlight");
         x[0].style.backgroundColor = "green";
         x[0].style.padding = "5px";
         }
      </script>
   </head>
   <body>
      <!-- HTML Class attribute used on p Element -->
      <p class="highlight">This is a highlighted paragraph.</p>
      <button onclick="myFunction()">Highlight</button>
   </body>
</html>

支援的瀏覽器

屬性
class	是	是	是	是	是

列印頁面