ID trong HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 < html > < head > <script> function displayResult ( ) { document . getElementById ( "myHeader" ) . innerHTML = "Chúc bạn ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Chúc bạn một ngày đẹp trời :)"; } </script> </head> <body> <h1 id="myHeader">Chào bạn !</h1> <button onclick="displayResult()">Nhấn vào đây để thay đổi nội dung.</button> </body> </html> |
Demo
Định nghĩa và cách sử dụng
Thuộc tính id quy định một định danh duy nhất cho một thẻ HTML (giá trị phải là duy nhất trong trang HTML).
Thuộc tính id hầu hết được sử dụng để trỏ tới một thành phần trang trí trong CSS và được JavaScript sử dụng để tương tác với thẻ (qua HTML DOM) thông qua giá trị.
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| id | Có | Có | Có | Có | Có |
Khác biệt giữa HTML 4.01 và HTML5
Trong HTML5, thuộc tính id có thể được sử dụng trong mọi thẻ HTML (hợp lệ với bất kỳ thẻ HTML nào. Tuy nhiên, thuộc tính này không phải lúc nào cũng hữu dụng).
Trong HTML 4.01, thuộc tính id không thể sử dụng trong các thẻ: <base>, <head>, <html>, <meta>, <param>, <script>, <style> và <title>.
Lưu ý: HTML 4.01 hạn chế khá lớn nội dung giá trị của id (ví dụ, trong HTML 4.01 giá trị của id không thể bắt đầu bằng số).
Cú pháp
|
1 |
<element id="id"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| id | Một định danh duy nhất cho thẻ. Luật đặt tên:
|
Ví dụ bổ sung
Ví dụ sử dụng thuộc tính để liên kết tới 1 thẻ trong trang
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <body> <h2><a id="top">Tiêu đề</a></h2> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <p>Đoạn văn bản....</p> <a href="#top">Lên trên đầu</a> </body> </html> |
Demo
Ví dụ sử dụng CSS để trang trí thẻ có thuộc tính id
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <style> #myHeader { color: red; text-align: center; } </style> </head> <body> <h1 id="myHeader">Đây tiêu đề trang</h1> </body> </html> |
Demo
