HTML The id Attribute - Thuộc tính id trong HTML
Thuộc tính HTML id được dùng để xác định một id duy nhất cho một thành phần HTML (giá trị đó phải là duy nhất trong tài liệu HTML).
Sử dụng thuộc tính id
Thuộc tính id được sử dụng bởi CSS hoặc JavaScript để thực hiện một nghiệm vụ nhất định trên thành phần có giá trị id cụ thể.
Trong CSS, để chọn thành phần với id cụ thể, viết một dấu thăng (#), tiếp đến là id của thành phần đó:
ví dụ
Sử dụng CSS để tạo kiểu cho một thành phần với id "myHeader":
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1><!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Kết quả:
My Header
Tip: Thuộc tính id có thể được sử dụng trên bất kì thành phần HTML nào.
Ghi chú: Giá trị id là phân biệt hoa thường.
Ghi chú: Giá trị id phải chứa ít nhất một kí tự, và bắt buộc không được chứa khoảng trắng (khoảng không, tabs, etc.).
Sự khác biệt giữa Class và ID
Một thành phần HTML chỉ có thể có một id duy nhất thuộc về duy nhất thành phần đó, trong khi tên class có thể được sử dụng bởi đa thành phần:
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>
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple similar elements -->
<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><!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple similar elements -->
<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>
</body>
</html>
Tip: Bạn có thể học thêm nhiều hơn về CSS trong hướng dẫn về CSS.
Dấu trang với id và liên kết(Bookmarks with ID and Links)
Các dấu trang trong HTML được sử dụng để cho phép người đọc nhảy đến các phần cụ thể của một trang web.
Các dấu trang có thể hữu ích nếu trang web của bạn rất dài.
Để làm một dấu trang, bạn phải đầu tiên tạo dấu dấu trang, và sau đó thêm một đường dẫn cho nó.
Khi đường dẫn được bấm vào, trang sẽ kéo xuống vị trí của dấu trang.
ví dụ
Đầu tiên, tạo một dấu trang với thuộc tính id :
<h2 id="C4">Chapter 4</h2>
Sau đó, thêm một đường dẫn đến dấu trang ("Jump to Chapter 4"), trong cùng một trang:
<a href="#C4">Jump to Chapter 4</a>Hoặc, thêm một đường dẫn đến dấu trang ("Jump to Chapter 4"), từ một trang khác:
ví dụ
<a href="html_demo.html#C4">Jump to Chapter 4</a><!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Sử dụng thuộc tính id trong JavaScript
JavaScript có thể truy cập một thành phần với một id cụ thể bằng cách sử dụng phương thức getElementById():
ví dụ
Sử dụng thuộc tính id để thao tác văn bản với JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script><!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Tip: Học JavaScript trong chương HTML JavaScỉpt, hoặc trong hướng dẫn về JavaScript.
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
