Thuộc tính HTML DOM className

Thuộc tính HTML DOM className được dùng để gán một lớp CSS cho một phần tử HTML. Thuộc tính className được dùng để thiết lập hoặc trả về giá trị thuộc tính tên lớp của một phần tử. Nếu không có lớp nào được liên kết với một phần tử HTML, thì một chuỗi rỗng được trả về. Chúng ta có thể thay đổi tên lớp được chứa trong một phần tử bằng thuộc tính này.

Cú pháp

Cú pháp sau đây dùng cho:

Thiết lập thuộc tính className:

HTMLElementObject.className = class;

Ở đây, giá trị class được dùng để chỉ định tên lớp của một phần tử. Một phần tử có thể có nhiều lớp được liên kết với nó được phân tách bằng dấu cách.

Ví dụ

Hãy xem một ví dụ về thuộc tính HTML DOM className:

<!DOCTYPE html> <html> <head> <style> .firstDiv { width: 300px; height: 100px; background-color:lightgreen; } .secondDiv{ color: red; border:solid 1px blue; margin-bottom:9px; } </style> </head> <body> <p>Nhấn nút bên dưới để hiển thị giá trị thuộc tính class của div</p> <div id="myDIV" class="firstDiv secondDiv"> Đây là một phần tử div mẫu. </div> <button onclick="getClassName()">LẤY CLASS</button> <p id="Sample"></p> <script> function getClassName() { var x = document.getElementById("myDIV").className; document.getElementById("Sample").innerHTML = "Các classNames với phần tử div là " + x; } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút LẤY CLASS:

Trong ví dụ trên:

Chúng ta đã tạo một div với id "myDIV" và nó chứa một số văn bản bên trong:

<div id="myDIV" class="firstDiv secondDiv"> Đây là một phần tử div mẫu. </div>

Chúng ta đã tạo nút LẤY CLASS sẽ thực thi phương thức getClassName() khi nhấp:

<button onclick="getClassName()">LẤY CLASS</button>

Phương thức getClassName() sẽ lấy phần tử <div> bằng phương thức getElementById() và lấy tất cả tên lớp của nó bằng thuộc tính className trên phần tử <div> và gán nó cho biến x. Các tên lớp sau đó được hiển thị trong đoạn văn với id "Sample":

function getClassName() { var x = document.getElementById("myDIV").className; document.getElementById("Sample").innerHTML = "Các classNames với phần tử div là " + x; }