HTML DOM className用法及代碼示例

在HTML文檔中，className屬性用於設置或返回元素的class屬性的值。使用此屬性，用戶可以將元素的類別更改為所需的類別。

用法:

返回className屬性

HTMLElementObject.className;

設置className屬性

HTMLElementObject.className = class;

className指定元素的類名稱。要應用多個類，請使用空格分隔它們。例如，如果一個元素具有兩個類，則我們將它們指定為“ classname1 classname2”，其中classname1和classname2是兩個不同類的名稱。 className屬性返回字符串或元素類別的空格分隔列表。

示例1：本示例為<div>元素設置類。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM className Property 
    </title> 
    <style> 
        .do_style { 
            width:600px; 
            height:100px; 
            background-color:lightgreen; 
            text-align:center; 
            font-size:25px; 
            color:green; 
            margin-bottom:10px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <p>Click the button to set a class for div.</p> 
  
    <div id="div1"> 
        GeeksforGeeks 
    </div> 
  
    <button onclick="myFunction()">Try it</button> 
  
    <script> 
        function myFunction() { 
            document.getElementById("div1").className = 
                "do_style"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：
在單擊按鈕之前：

原來

單擊按鈕後：

單擊嘗試按鈕後

說明：使用className屬性為<div>元素的類分配一個值。

示例2：本示例獲取<div>元素的類。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM className Property 
    </title> 
    <style> 
        .do_style { 
            width:600px; 
            height:100px; 
            background-color:lightgreen; 
            text-align:center; 
            font-size:25px; 
            color:green; 
            margin-bottom:10px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <p>Click the button to set a class for div.</p> 
  
    <div id="div1"> 
        GeeksforGeeks 
    </div> 
  
    <button onclick="myFunction()">Try it</button> 
  
    <script> 
        function myFunction() { 
            document.getElementById("div1").className = 
                "do_style"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：

原來

單擊按鈕後：

按下嘗試按鈕後

示例3：本示例將覆蓋現有的類名稱。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM className Property 
    </title> 
    <style> 
        .oldstyle { 
            width:300px; 
            height:50px; 
            background-color:lightgreen; 
            color:green; 
            margin-bottom:10px; 
        } 
          
        .newstyle { 
            width:400px; 
            height:100px; 
            background-color:white; 
            text-align:center; 
            font-size:25px; 
            color:green; 
            margin-bottom:10px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <p> 
      Click the button to change the value of the 
      class attribute of div to "newstyle". 
    </p> 
  
    <div id="div1" class="oldstyle"> 
        GeeksforGeeks 
    </div> 
  
    <button onclick="myFunction()"> 
        Try it 
    </button> 
  
    <script> 
        function myFunction() { 
            document.getElementById("div1").className = 
                "newstyle"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：

原來

單擊按鈕後：

按下後嘗試

支持的瀏覽器：

穀歌瀏覽器
IE瀏覽器
火狐瀏覽器
Opera
蘋果瀏覽器

相關用法

注：本文由純淨天空篩選整理自chaitanyashah707大神的英文原創作品 HTML | DOM className Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。