Sử dụng attribute id
Attribute id chỉ định một id duy nhất cho một HTML element. Giá trị của thuộc tính id phải là duy nhất trong HTML.
Attribute id được sử dụng để trỏ đến id trong style sheet. Nó cũng được JavaScript sử dụng để truy cập và thao tác element với id cụ thể.
Cú pháp cho id là: viết một ký tự thăng (#), 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 element <h1> trỏ đến tên id "myHeader". Element <h1> này sẽ được style theo định nghĩa kiểu #myHeader trong thẻ <style>.
Ví dụ
<!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">Tiêu đề</h1> </body> </html>
Sự khác biệt giữa class và id
Một tên class có thể được sử dụng bởi nhiều HTML element, trong khi tên id chỉ được sử dụng bởi một HTML element trong trang:
<style> /* Style element với id "myHeader" */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* Style tất cả elements với class "city" */ .city { background-color: tomato; color: white; padding: 10px; } </style> <!-- element có một id duy nhất --> <h1 id="myHeader">Thành phố của tôi</h1> <!-- các elements với cùng một class --> <h2 class="city">London</h2> <p>London là thủ đô của nước Anh.</p> <h2 class="city">Paris</h2> <p>Paris is là thủ đô của nước Pháp.</p> <h2 class="city">Tokyo</h2> <p>Tokyo là thủ đô của Nhật Bản.</p>
HTML Bookmarks với id và links
HTML Bookmark được sử dụng để cho phép người đọc chuyển đến các phần cụ thể của trang web.
Bookmark có thể hữu ích nếu trang của bạn rất dài. Để sử dụng bookmark trước tiên bạn phải tạo dấu trang, sau đó thêm liên kết vào đó. Sau đó, khi liên kết được nhấp vào, trang sẽ cuộn đến vị trí có bookmark.
Ví dụ
Đầu tiên, hãy tạo bookmark với attribute id:
<h2 id="C4">Chapter 4</h2>Sau đó, thêm một link đến bookmark ("Chuyển đến Chương 4"), từ cùng một trang:
<a href="#C4">Chuyển đến Chương 4</a>Sau đó, thêm một link đến bookmark ("Chuyển đến Chương 4"), từ một trang khác:
<a href="html_demo.html#C4">Chuyển đến Chương 4</a>
Sử dụng attribute id trong JavaScript
Attribute id 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 element có id cụ thể bằng phương thức getElementById ():
<script> function displayResult() { document.getElementById("myHeader").innerHTML = "Một ngày tốt lành!"; } </script>