HTML id 属性

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

id Thuộc tính quy định id duy nhất của phần tử HTML. (Giá trị này trong tài liệu HTML phải là duy nhất).

id Thuộc tính thường được sử dụng để chỉ đến các phong cách trong bảng phong cách, và để thao tác với các phần tử có id cụ thể bằng JavaScript (qua HTML DOM).

id Thuộc tính cũng có thể được sử dụng như là điểm dán liên kết (link anchor).

Xem thêm:

Giáo trình HTML:HTML id

Giáo trình HTML:HTML 属性

Giáo trình CSS:CSS 语法

Tài liệu tham khảo CSS:CSS #id Chọn bộ lọc

Tài liệu tham khảo HTML DOM:Phương thức getElementById() của HTML DOM

Tài liệu tham khảo HTML DOM:Thuộc tính id của HTML DOM

Tài liệu tham khảo HTML DOM:HTML DOM Style 对象

Thực hành

Ví dụ 1

Sử dụng thuộc tính id để thay đổi một đoạn văn bản bằng JavaScript:

<html>
<body>
<h1 id="myHeader">Chào World!</h1>
<button onclick="displayResult()">Thay đổi văn bản</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Có một ngày đẹp!";
}
</script>
</body>
</html>

Thử nghiệm trực tiếp

Trang dưới đây cung cấp thêm ví dụ.

Cú pháp

<element id="id">

Giá trị thuộc tính

Giá trị Mô tả
id

Đặt một id duy nhất cho phần tử. Quy tắc đặt tên:

  • Phải chứa ít nhất một ký tự
  • Không thể chứa bất kỳ ký tự trống nào

Thêm nhiều ví dụ

Ví dụ 2

Sử dụng thuộc tính id để liên kết đến phần tử có id cụ thể trong trang:

<html>
<body>
<h2><a id="top">Tiêu đề nào đó</a></h2>
<p> rất nhiều văn bản ....</p>
<p> rất nhiều văn bản ....</p>
<p> rất nhiều văn bản ....</p>
<a href="#top">Quay lại đầu trang</a>
</body>
</html>

Thử nghiệm trực tiếp

Ví dụ 3

Ví dụ 3: Sử dụng thuộc tính id để định dạng văn bản qua CSS:

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CodeW3C.com là tuyệt vời nhất!</h1>
</body>
</html>

Thử nghiệm trực tiếp

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ợ