Thuộc tính id HTML
Thuộc tính id
HTML được sử dụng để chỉ định một id duy nhất cho một phần tử HTML.
Bạn không thể có nhiều phần tử có cùng id trong tài liệu HTML.
Sử dụng thuộc tính id
Thuộc tính id
chỉ định một id duy nhất cho một phần tử HTML. Giá trị của thuộc tính id
phải là duy nhất trong tài liệu HTML.
Thuộc tính id
được sử dụng để trỏ đến một khai báo kiểu cụ thể trong biểu định kiểu. Nó cũng được JavaScript sử dụng để truy cập và thao tác phần tử với id cụ thể.
Cú pháp của id là: viết ký tự băm (#), theo sau là tên id. Sau đó, xác định thuộc tính CSS trong dấu ngoặc nhọn {}.
Trong ví dụ sau, chúng ta có phần tử <h1>
trỏ đến tên id "myHeader". Phần tử <h1>
này sẽ được tạo kiểu theo định nghĩa kiểu #myHeader
trong phần đầu:
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>
Hãy tự mình thử »Lưu ý: Tên id có phân biệt chữ hoa chữ thường!
Lưu ý: Tên id phải chứa ít nhất một ký tự, không được bắt đầu bằng số và không được chứa khoảng trắng (dấu cách, tab, v.v.).
Sự khác biệt giữa lớp và ID
Một tên lớp có thể được sử dụng bởi nhiều phần tử HTML, trong khi tên id chỉ được sử dụng bởi một phần tử HTML trong trang:
Ví dụ
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Hãy tự mình thử »Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi.
Dấu trang HTML có ID và liên kết
Dấu trang HTML được sử dụng để cho phép người đọc chuyển đến các phần cụ thể của trang web.
Dấu trang có thể hữu ích nếu trang của bạn rất dài.
Để sử dụng dấu trang, trước tiên bạn phải tạo dấu trang rồi thêm liên kết vào dấu trang đó.
Sau đó, khi nhấp vào liên kết, trang sẽ cuộn đến vị trí có dấu trang.
Ví dụ
Đầu tiên, tạo bookmark với thuộc tính id
:
<h2 id="C4">Chapter 4</h2>
Sau đó, thêm liên kết vào dấu trang ("Chuyển tới Chương 4"), từ trong cùng một trang:
Hoặc thêm liên kết vào dấu trang ("Chuyển tới Chương 4") từ một trang khác:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Sử dụng thuộc tính id trong JavaScript
Thuộc tính id
cũng có thể được JavaScript sử dụng để thực hiện một số tác vụ cho thành phần cụ thể đó.
JavaScript có thể truy cập một phần tử có id cụ thể bằng phương thức getElementById()
:
Ví dụ
Sử dụng thuộc tính id
để thao tác văn bản bằng JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Hãy tự mình thử »Mẹo: Nghiên cứu JavaScript trong chương HTML JavaScript hoặc trong Hướng dẫn JavaScript của chúng tôi.
Tóm tắt chương
- Thuộc tính
id
được sử dụng để chỉ định một id duy nhất cho phần tử HTML - Giá trị của thuộc tính
id
phải là duy nhất trong tài liệu HTML - Thuộc tính
id
được CSS và JavaScript sử dụng để tạo kiểu/chọn một thành phần cụ thể - Giá trị của thuộc tính
id
phân biệt chữ hoa chữ thường - Thuộc tính
id
cũng được sử dụng để tạo dấu trang HTML - JavaScript có thể truy cập một phần tử có id cụ thể bằng phương thức
getElementById()