HTML Id

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    6 thg 10, 2022

  • Số lượt xem

    301 lượt xem


Attribute id HTML được sử dụng để chỉ định một id duy nhất cho một HTML element. Bạn không thể có nhiều hơn một element có cùng một id trong một tài liệu HTML.

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>

 

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 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>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.