Thuộc tính id HTML
Thuộc tính HTML idđượ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 hơn một phần tử có cùng một id trong một tài liệu HTML.
Sử dụng Thuộc tính id
Thuộc idtính chỉ định một id duy nhất cho một phần tử HTML. Giá trị của id
thuộc tính phải là duy nhất trong tài liệu HTML.
Thuộc idtính được sử dụng để trỏ đến một khai báo kiểu cụ thể trong một 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 cho id là: viết một ký tự băm (#), theo sau là tên id. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}.
Trong ví dụ sau, chúng ta có một <h1>phần tử trỏ đến tên id "myHeader". Phần <h1>
tử này sẽ được tạo kiểu theo #myHeader
định nghĩa kiểu trong phần đầu:
Thí 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>
Lưu ý: Tên id 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 Class 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:
Thí 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>
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, sau đó thêm liên kết vào dấu trang.
Sau đó, khi liên kết được nhấp vào, trang sẽ cuộn đến vị trí có dấu trang.
Thí dụ
Đầu tiên, hãy tạo dấu trang với idthuộc tính:
<h2 id="C4">Chapter 4</h2>
Sau đó, thêm một liên kết đến dấu trang ("Chuyển đến Chương 4"), từ trong cùng một trang:
Thí dụ
<a href="#C4">Jump to Chapter 4</a>
Hoặc, thêm một liên kết đến dấu trang ("Chuyển đến 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 idtính này cũng có thể được JavaScript sử dụng để thực hiện một số tác vụ cho phần tử cụ thể đó.
JavaScript có thể truy cập một phần tử có id cụ thể bằng getElementById()phương thức:
Thí dụ
Sử dụng idthuộc tính để thao tác văn bản với JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Mẹo: Nghiên cứu JavaScript trong chương JavaScript HTML hoặc trong Hướng dẫn JavaScript của chúng tôi .
Tóm tắt chương
- Thuộc
idtính được sử dụng để chỉ định một id duy nhất cho một phần tử HTML - Giá trị của
idthuộc tính phải là duy nhất trong tài liệu HTML - Thuộc
idtính được CSS và JavaScript sử dụng để tạo kiểu / chọn một phần tử cụ thể - Giá trị của
idthuộc tính có phân biệt chữ hoa chữ thường - Thuộc
idtính này 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
getElementById()phương thức