Thuộc tính id của HTML

HTML id Thuộc tính được sử dụng để chỉ định ID duy nhất cho phần tử HTML.

Trong một tài liệu HTML, không thể có nhiều phần tử có cùng ID.

Sử dụng thuộc tính id

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

id Thuộc tính được sử dụng để chỉ định các khai báo phong cách cụ thể trong bảng phong cách. JavaScript cũng có thể sử dụng nó để truy cập và thao tác các phần tử có ID cụ thể.

Cú pháp của id là: viết một dấu số không (#), sau đó là tên id. Sau đó, định nghĩa thuộc tính CSS trong dấu ngoặc nhọn {}.

dưới đây chúng ta có một <h1> yếu tố, nó chỉ đến tên id "myHeader" này. Trong ví dụ <h1> Các yếu tố sẽ dựa trên phần head của: #myHeader Cách định nghĩa样式 để thiết lập樣式:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

Thử làm ngay

Ghi chú:Tên id nhạy cảm với chữ hoa/thường!

Ghi chú:ID phải chứa ít nhất một ký tự và không thể chứa ký tự trắng (khoảng trống, tab, v.v.).

Sự khác biệt giữa Class và ID

Một tên lớp có thể được sử dụng bởi nhiều yếu tố HTML, trong khi một tên id chỉ có thể được sử dụng bởi một yếu tố HTML trên trang:

Ví dụ

<style>
/* Đặt样式 cho yếu tố có id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Đặt样式 cho tất cả các yếu tố có tên lớp "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Các yếu tố có id duy nhất -->
<h1 id="myHeader">My Cities</h1>
<!-- Các yếu tố có cùng tên lớp nhiều lần -->
<h2 class="city">London</h2>
<p>London là thủ đô của Anh.</p>
<h2 class="city">Paris</h2>
<p>Paris là thủ đô của Pháp.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản.</p>

Thử làm ngay

Hướng dẫn:Vui lòng truy cập vào Giáo trình CSS học thêm kiến thức CSS.

Thực hiện thẻ nhớ HTML thông qua ID và liên kết

Thẻ nhớ HTML được sử dụng để cho phép người đọc nhảy đến phần cụ thể của trang web.

Nếu trang web rất dài, thẻ nhớ có thể rất hữu ích.

Để sử dụng thẻ nhớ, bạn phải tạo nó trước, sau đó thêm liên kết cho nó.

Sau đó, khi nhấp vào liên kết, trang web sẽ cuộn xuống vị trí có thẻ nhớ.

Ví dụ

Trước hết, sử dụng id Thuộc tính tạo bookmark:

<h2 id="C4">Chương 4</h2>

Sau đó, trong cùng một trang, thêm liên kết đến bookmark này ("Chuyển sang Chương 4"):

Ví dụ

<a href="#C4">Chuyển sang Chương 4</a>

Thử làm ngay

Hoặc, trong một trang khác, thêm liên kết trỏ đến bookmark này ("Chuyển sang Chương 4"):

<a href="html_demo.html#C4">Chuyển sang Chương 4</a>

Sử dụng thuộc tính id trong JavaScript

JavaScript cũng có thể sử dụng thuộc tính id để thực hiện một số nhiệm vụ cho phần tử cụ thể.

JavaScript có thể sử dụng getElementById() Phương pháp truy cập phần tử có id cụ thể:

Ví dụ

Sử dụng thuộc tính id để xử lý văn bản bằng JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Thử làm ngay

Hướng dẫn:Vui lòng JavaScript trong HTML Trong chương này, hoặc Giáo trình JavaScript Học JavaScript.

Tóm tắt chương

  • id Thuộc tính được sử dụng để chỉ định id duy nhất cho phần tử HTML
  • id Giá trị của thuộc tính trong tài liệu HTML phải là duy nhất
  • CSS và JavaScript có thể sử dụng id Thuộc tính để chọn phần tử hoặc thiết lập樣式 cho phần tử cụ thể
  • id Giá trị của thuộc tính phân biệt chữ hoa, chữ thường
  • id Thuộc tính cũng có thể được sử dụng để tạo bookmark HTML
  • JavaScript có thể sử dụng getElementById() Phương pháp truy cập phần tử có id cụ thể