Thuộc tính toàn cầu

8.1 Thuộc tính id

Thuộc tính toàn cầu là những thuộc tính có thể được sử dụng với bất kỳ phần tử HTML nào. Chúng đóng vai trò quan trọng trong việc xác định, phân loại và quản lý các phần tử trang web.

Thuộc tính id được sử dụng để xác định duy nhất một phần tử trên trang. Giá trị của thuộc tính id phải là duy nhất trong toàn bộ tài liệu HTML. Thuộc tính này thường được sử dụng để kết nối với các phần tử CSS và JavaScript.

Cú pháp:

    
      <element id="unique-id">...</element>
    
  

Ví dụ sử dụng:

    
      #header {
        background-color: #f4f4f4;
        padding: 10px;
      }
    
  

    
      <div id="header">
        <h1>Tiêu đề</h1>
      </div>
    
  

    
      document.getElementById('header').style.color = 'blue';
    
  

Lợi ích:

• Xác định duy nhất: cho phép xác định các phần tử trên trang một cách duy nhất
• Định dạng: tiện lợi cho việc áp dụng các phong cách CSS
• Thao tác với DOM: dễ dàng truy cập các phần tử bằng JavaScript

8.2 Thuộc tính class

Thuộc tính class được sử dụng để gán một hoặc nhiều lớp cho phần tử. Các lớp này có thể được sử dụng để áp dụng các kiểu CSS và thao tác với các phần tử thông qua JavaScript. Khác với id, giá trị class không cần phải là duy nhất.

Cú pháp:

    
      <element class="class-1 class-2">...</element>
    
  

Ví dụ sử dụng:

    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  

    
      <p class="highlight">Đoạn văn bản này được làm nổi bật bằng màu vàng.</p>
      <p class="bold">Đoạn văn bản này là chữ đậm.</p>
      <p class="highlight bold">Đoạn văn bản này là chữ đậm và được làm nổi bật bằng màu vàng.</p>
    
  

Lợi ích:

• Nhiều lớp: cho phép gán nhiều lớp cho một phần tử
• Nhóm phần tử: dễ dàng áp dụng kiểu cho nhóm phần tử
• Thao tác với DOM: dễ dàng làm việc với nhóm phần tử qua JavaScript

8.3 Thuộc tính data-*

Thuộc tính data-* cho phép lưu trữ dữ liệu tùy chỉnh trong các phần tử HTML. Những thuộc tính này bắt đầu bằng tiền tố data- và có thể có bất kỳ giá trị nào. Chúng thường được sử dụng để lưu trữ thông tin có thể hữu ích cho JavaScript.

Cú pháp:

    
      <element data-key="value">...</element>
    
  

Ví dụ sử dụng:

    
      <div data-user-id="12345" data-role="admin">
        Người dùng với ID 12345, quyền - quản trị viên.
      </div>
    
  

    
// Tìm phần tử đầu tiên trên trang có thuộc tính data-user-id
const userElement = document.querySelector('[data-user-id]');

// Lấy giá trị của thuộc tính data-user-id và hiển thị nó trong console
console.log(userElement.dataset.userId); // Kết quả: 12345

// Lấy giá trị của thuộc tính data-role và hiển thị nó trong console
console.log(userElement.dataset.role); // Kết quả: admin
    
  

Lợi ích:

• Lưu dữ liệu: tiện lợi cho việc lưu trữ và truyền dữ liệu liên quan đến các phần tử
• Truy cập qua JavaScript: dễ dàng truy cập và thay đổi dữ liệu qua dataset API
• Linh hoạt: cho phép thêm bất kỳ dữ liệu nào mà không vi phạm chuẩn HTML