🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ về 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 hơn một thành phần có cùng id trong tài liệu HTML

1. Sử dụng id trong HTML

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 một danh sách 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 các 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:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header Cafedev</h1>

</body>
</html>

Copy and chạy code

Lưu ý: Tên id là trường hợp nhạy cảm nên hãy đặt tên một cách cận thận

Lưu ý: Tên id phải chứa ít nhất một ký tự và không được chứa khoảng trắng (dấu cách, tab, v.v.).

2. Sự khác nhau giữa class vs id

Một tên class có thể được sử dụng bởi nhiều thành phần HTML, trong khi tên id chỉ được sử dụng bởi một thành phần HTML trong trang:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<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">HCM</h2>
<p>HCM is the capital of VN.</p>

<h2 class="city">HN</h2>
<p>HN is the capital of VN.</p>

<h2 class="city">DN</h2>
<p>DN is the capital of VN.</p>

Copy and chạy code

Mẹo: Bạn có thể tìm hiểu thêm về series tự học CSS.

3. Đánh dấu trang HTML có ID và Liên kết

Đánh 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 một dấu trang, trước tiên bạn phải tạo nó và sau đó thêm một liên kết đến nó.

Sau đó, khi liên kết được nhấp, trang sẽ cuộn đến vị trí có 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 liên kết đến dấu trang (“Chuyển đến Chapter 4”), từ trong cùng một trang:

 <a href="#C4">Jump to Chapter 4</a>

Full ví dụ:

<!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 cafedev</p>

<h2>Chapter 2</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 3</h2>
<p>This chapter explains cafedev</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 5</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 6</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 7</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 8</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 9</h2>
<p>This chapter explains cafedev</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 11</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 12</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 13</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 14</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 15</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 16</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 17</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 18</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 19</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 20</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 21</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 22</h2>
<p>This chapter explains cafedev</p>

<h2>Chapter 23</h2>
<p>This chapter explains cafedev</p>

</body>
</html>

Copy and chạy code

Hoặc, thêm một liên kết đến dấu trang (“Chuyển đến Chapter 4”), từ một trang khác:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

4. 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 phần tử cụ thể đó.

JavaScript có thể truy cập một phần tử với một 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 với JavaScript:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!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 Cafedev!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day Cafedev!";
}
</script>

</body>
</html>

Copy and chạy code

Mẹo: Nghiên cứu JavaScript trong series tự học JavaScript.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM