HTML - DOM className 屬性

HTML DOM 的className 屬性用於訪問或修改（更改）元素的 class 屬性的值，表示為以空格分隔的字串。

語法

以下是 HTML DOM 的className（設定類名）屬性的語法：

element.className = class_name;

要檢索類名屬性，請使用以下語法：

element.className;

其中，class_name 是您要應用於元素的類名。對於多個類，請在字串中用空格分隔它們。

引數

由於它是一個屬性，因此它不接受任何引數。

返回值

此屬性返回一個字串，其中包含分配給元素的所有類，每個類之間用空格分隔。

示例 1：使用 className 應用樣式

以下示例演示了 HTML DOM 的className 屬性的用法。它將多個 CSS 類應用於 HTML 元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .highlight {
       color: green;
       font-weight: bold;
       font-style: italic;
   }
</style>
</head>
<body>
<p>Click the below button to style with className...</p>  
<p id="ex">A paragraph with default styling.</p>
<button onclick="applyStyles()">Apply Styles</button> 
<script>
   var paraElement = document.getElementById("ex"); 
   function applyStyles() { 
      paraElement.className = "highlight"; 
   }
</script>
</body>
</html>

示例 2：切換 Div 元素的樣式

這是另一個使用 HTML DOM 的className 屬性的示例。我們使用此屬性向<div> 元素新增一個類名，並在 CSS 中使用該類名對其進行樣式設定：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .highlight {
       background-color: pink;
       color: blue;
       padding: 10px;
       border: 1px solid black;
   }
   .italic {
       font-style: italic;
   }
</style>
</head>
<body>
<p>Click the below button to style with className...</p>  
<button onclick="toggleStyles()">Toggle Styles</button>
<br><br>
<div id="ex" class="highlight">This is a div with default styling.</div>
<script>
   function toggleStyles() {
      var divElement = document.getElementById("ex");
      divElement.classList.toggle("italic");
   }
</script>
</body>
</html>

示例 3：檢索元素的 Class 屬性

下面的示例顯示瞭如何使用className 屬性訪問和顯示 HTML 元素的 class 屬性：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title> 
<style>
   .highlight {
       background-color: AquaMarine;
       color: blue;
       padding: 10px;
       font-style: italic;
   }
</style>
</head>
<body>
<div id="myDIV" class="highlight italic">This is a div with classes "highlight" and "italic".</div>
<br>
<button onclick="getClassAttribute()">Get Class Attribute</button>
<p id="cl"></p>
<script>
   function getClassAttribute() {
      var divEle = document.getElementById("myDIV");
      var clat = divEle.getAttribute("class");
      document.getElementById("cl").textContent = "Class attribute value: " + clat;
   }
</script>
</body>
</html>

示例 4：檢索具有多個類的 Class 屬性

此示例顯示瞭如何使用className 屬性獲取具有多個類的元素的 class 屬性：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .highlight {
       background-color: yellow;
   }
   .italic {
       font-style: italic;
   }
   .bold {
       font-weight: bold;
   }
</style>
</head>
<body>
<p>Retrieves the class attribute of an element with multiple classes.</p>    
<div id="myDiv" class="highlight italic bold">Sample Div Element</div>
<br>
<button onclick="getClassAttribute()">Get Class Attribute</button>
<p id="Res"></p>
<script>
   function getClassAttribute() {
      const ele = document.getElementById('myDiv');
      const classAttr = ele.className;
      document.getElementById('Res').textContent = `Class Attribute: ${classAttr}`;
   }
</script>
</body>
</html>

示例 5：在多個類之間切換

此示例向我們展示瞭如何在不同方式之間切換多個 CSS 類以設定特定段落 (<p>) 元素的樣式時使用className 屬性：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title> 
<style>
   .highlight {
       background-color: lightpink;
   }
   .large {
       font-size: 24px;
   }
   .underline {
       text-decoration: underline;
   }
</style>
</head>
<body>
<p>Click the below button to toggle between the classes</p>
<p id="myPara" class="highlight">I am a default paragraph with default styling.!!</p>
<button onclick="toggleClass()">Toggle Classes</button>
<script>
   function toggleClass() {
      const para=document.getElementById('myPara');
      if (para.classList.contains('highlight')) {
         para.className = 'large';  
      } else if (para.classList.contains('large')){
         para.className = 'underline';
      } else {
         para.className = 'highlight';
      }
   }
</script>
</body>
</html>

示例 6：覆蓋 Class 屬性

以下示例使用className 屬性將現有 class 屬性覆蓋為新的 class 屬性：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .blue {
       color: blue;
   }
   .red {
       color: red;
   }
   .underline {
       text-decoration: underline;
   }
</style>
</head>
<body>
<p>Click the buttons to apply different class attributes to this paragraph:</p>
<p id="my" class="blue">This paragraph has the class "blue".</p>
<button onclick="applyClass('red')">Apply Red Class</button>
<button onclick="applyClass('underline')">Apply Underline Class</button>
<script>
   function applyClass(newClass) {
      const para = document.getElementById('my');
      para.className = newClass;
   }
</script>
</body>
</html>

示例 7：新增類而不覆蓋

此示例顯示了className 屬性的用法。以下程式碼包括兩個按鈕，用於向段落 (<p>) 元素新增突出顯示和下劃線：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM className</title>
<style>
   .highlight {
       background-color: yellow;
   }
   .underline {
       text-decoration: underline;
   }
</style>
</head>
<body> 
<p>Click the buttons to toggle between adding classes to this paragraph:</p>
<p id="myP" class="highlight">This paragraph has the class "highlight".</p>
<button onclick="addClass('underline')">Add Underline Class</button>
<button onclick="addClass('highlight')">Toggle Highlight Class</button>
<script>
function addClass(newClass) {
   const para=document.getElementById('myP');         
   // Check if the class is already present
   if (!para.classList.contains(newClass)) {
      // Append class without overwriting 
      para.className += ' ' + newClass;
   } else {
      para.classList.remove(newClass);
      }
   }
</script>
</body>
</html>

支援的瀏覽器

屬性
className	是	是	是	是	是

html_dom_element_reference.htm

列印頁面