Thuộc tính class của HTML

Định nghĩa và cách sử dụng

class Thuộc tính này quy định tên lớp (classname) của yếu tố.

class Thuộc tính này chủ yếu được sử dụng để chỉ định lớp (class) trong bảng định dạng. Tuy nhiên, nó cũng có thể được sử dụng qua JavaScript (HTML DOM) để thay đổi các yếu tố HTML có lớp đã chỉ định.

Xem thêm:

Hướng dẫn giáo trình HTML:Thuộc tính của HTML

Hướng dẫn giáo trình CSS:Ngữ pháp CSS

Hướng dẫn tham khảo CSS:Chọn器 .class của CSS

Hướng dẫn tham khảo HTML DOM:Phương thức getElementsByClassName() của HTML DOM

Hướng dẫn tham khảo HTML DOM:Thuộc tính className của HTML DOM

Hướng dẫn tham khảo HTML DOM:Thuộc tính classList của HTML DOM

Hướng dẫn tham khảo HTML DOM:Đối tượng Style của HTML DOM

Ví dụ

Ví dụ 1

Sử dụng thuộc tính class trong tài liệu HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Vui lòng chú ý, đây là đoạn văn quan trọng. :)</p>
</body>
</html>

Thử ngay

Xem thêm các ví dụ bên dưới trang.

Cú pháp

<element class="classname">

Giá trị thuộc tính

Giá trị Mô tả
classname

Chỉ định một hoặc nhiều tên lớp cho phần tử.

Nếu muốn chỉ định nhiều lớp, có thể phân cách tên lớp bằng khoảng trống.

Điều này cho phép bạn nhóm nhiều lớp CSS cho một phần tử HTML.

Ví dụ: <span class="left important">

Cách đặt tên:

  • Phải bắt đầu bằng chữ cái A-Z hoặc a-z
  • Có thể bao gồm: chữ cái (A-Za-z), số (0-9), dấu gạch dưới ("-") và dấu gạch chéo ("_")

Các ví dụ thêm

Ví dụ 2

Thêm nhiều lớp vào một phần tử HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Tiêu đề 1</h1>
<p>Một đoạn văn.</p>
</body>
</html>

Thử ngay

Ví dụ 3

Sử dụng JavaScript để thêm màu nền vàng cho phần tử đầu tiên có class="example" (ký tự số 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Thử ngay

Ví dụ 4

Sử dụng JavaScript để thêm lớp "mystyle" vào phần tử có id là "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Thử ngay

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ