HTML attribute reference

Danh sách thuộc tính

Thuộc tính nội dung và thuộc tính IDL

Trong HTML, hầu hết các thuộc tính có hai mặt: thuộc tính nội dung (content attribute) và thuộc tính IDL (Interface Definition Language).

Thuộc tính nội dung là thuộc tính bạn đặt từ nội dung (mã HTML) và bạn có thể đặt hoặc lấy qua element.setAttribute() hoặc element.getAttribute(). Thuộc tính nội dung luôn là chuỗi ngay cả khi giá trị mong đợi phải là số nguyên. Ví dụ, để đặt maxlength của phần tử <input> thành 42 bằng thuộc tính nội dung, bạn phải gọi setAttribute("maxlength", "42") trên phần tử đó.

Thuộc tính IDL còn được gọi là thuộc tính JavaScript. Đây là những thuộc tính bạn có thể đọc hoặc đặt bằng cách sử dụng các thuộc tính JavaScript như element.foo. Thuộc tính IDL luôn sử dụng (nhưng có thể chuyển đổi) thuộc tính nội dung cơ bản để trả về giá trị khi bạn lấy nó và sẽ lưu thứ gì đó vào thuộc tính nội dung khi bạn đặt nó. Nói cách khác, các thuộc tính IDL, về bản chất, phản ánh các thuộc tính nội dung.

Hầu hết thời gian, các thuộc tính IDL sẽ trả về giá trị của chúng như chúng thực sự được sử dụng. Ví dụ, type mặc định cho các phần tử <input> là "text", vì vậy nếu bạn đặt input.type="foobar", phần tử <input> sẽ thuộc kiểu text (trong giao diện và hành vi) nhưng giá trị của thuộc tính nội dung "type" sẽ là "foobar". Tuy nhiên, thuộc tính IDL type sẽ trả về chuỗi "text".

Các thuộc tính IDL không phải lúc nào cũng là chuỗi; ví dụ, input.maxlength là một số (signed long). Khi sử dụng các thuộc tính IDL, bạn đọc hoặc đặt các giá trị kiểu mong muốn, vì vậy input.maxlength luôn trả về một số và khi bạn đặt input.maxlength, nó muốn một số. Nếu bạn truyền kiểu khác, nó sẽ tự động chuyển đổi thành số theo các quy tắc JavaScript tiêu chuẩn cho việc chuyển đổi kiểu.

Các thuộc tính IDL có thể phản ánh các kiểu khác như unsigned long, URL, boolean, v.v. Thật không may, không có quy tắc rõ ràng và cách các thuộc tính IDL hành xử kết hợp với các thuộc tính nội dung tương ứng của chúng tùy thuộc vào thuộc tính. Hầu hết thời gian, nó sẽ tuân theo các quy tắc được đặt ra trong đặc tả, nhưng đôi khi không. Các đặc tả HTML cố gắng làm cho điều này thân thiện với nhà phát triển nhất có thể, nhưng vì nhiều lý do (chủ yếu là lịch sử), một số thuộc tính hành xử kỳ lạ (select.size, ví dụ) và bạn nên đọc các đặc tả để hiểu chính xác cách chúng hành xử.

Thuộc tính Boolean

Một số thuộc tính nội dung (ví dụ: required, readonly, disabled) được gọi là thuộc tính boolean. Nếu thuộc tính boolean có mặt, giá trị của nó là true, và nếu vắng mặt, giá trị của nó là false.

HTML xác định các hạn chế về các giá trị được phép của thuộc tính boolean: Nếu thuộc tính có mặt, giá trị của nó phải là chuỗi rỗng (tương đương, thuộc tính có thể không có giá trị được gán), hoặc một giá trị là khớp không phân biệt hoa thường ASCII với tên chính tắc của thuộc tính, không có khoảng trắng đầu hoặc cuối. Các ví dụ sau là các cách hợp lệ để đánh dấu một thuộc tính boolean:

<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>

Để rõ ràng, các giá trị "true" và "false" không được phép trên các thuộc tính boolean. Để biểu thị giá trị false, thuộc tính phải được bỏ qua hoàn toàn. Hạn chế này làm rõ một số hiểu lầm phổ biến: Với checked="false" chẳng hạn, thuộc tính checked của phần tử sẽ được hiểu là true vì thuộc tính có mặt.

Thuộc tính xử lý sự kiện

<div onclick="console.log(new URL(location))">Bad Example</div>

function onclick(event) {
  with (this.ownerDocument) {
    with (this) {
      console.log(new URL(location)); // 'URL' now resolves to document.URL instead of window.URL
      // TypeError: URL is not a constructor
    }
  }
}

Ngoài các thuộc tính được liệt kê trong bảng trên, các xử lý sự kiện toàn cục — chẳng hạn như onclick — cũng có thể được chỉ định như thuộc tính nội dung trên tất cả các phần tử.

Tất cả các thuộc tính xử lý sự kiện chấp nhận một chuỗi. Chuỗi này sẽ được sử dụng để tổng hợp một hàm JavaScript như function name(/*args*/) {body}, trong đó name là tên của thuộc tính và body là giá trị của thuộc tính. Handler nhận cùng các tham số như đối tác xử lý sự kiện JavaScript của nó — hầu hết các handler chỉ nhận một tham số event, trong khi onerror nhận năm tham số: event, source, lineno, colno, error. Điều này có nghĩa là bạn có thể, nói chung, sử dụng biến event bên trong thuộc tính.

<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>

Xem thêm

• Các phần tử HTML