HTML 屬性參考

屬性列表

內容屬性與 IDL 屬性

在 HTML 中，大多數屬性都有兩個方面：內容屬性和 IDL（介面定義語言）屬性。

內容屬性是您從內容（HTML 程式碼）設定的屬性，您可以透過 element.setAttribute() 或 element.getAttribute() 來設定或獲取它。即使預期值應為整數，內容屬性也始終是字串。例如，要使用內容屬性將 <input> 元素的 maxlength 設定為 42，您必須在該元素上呼叫 setAttribute("maxlength", "42")。

IDL 屬性也稱為 JavaScript 屬性。這些是您可以使用 JavaScript 屬性（例如 element.foo）讀取或設定的屬性。IDL 屬性在獲取值時總是使用（但可能會轉換）底層內容屬性來返回值，並在設定值時將內容儲存到內容屬性中。換句話說，IDL 屬性本質上反映了內容屬性。

大多數情況下，IDL 屬性將按其實際使用方式返回值。例如，<input> 元素的預設 type 是“text”，因此如果您設定 input.type="foobar"，<input> 元素的型別將是文字（在外觀和行為上），但“type”內容屬性的值將是“foobar”。但是，type IDL 屬性將返回字串“text”。

IDL 屬性並不總是字串；例如，input.maxlength 是一個數字（帶符號的長整型）。使用 IDL 屬性時，您會讀取或設定所需型別的值，因此 input.maxlength 總是會返回一個數字，並且當您設定 input.maxlength 時，它需要一個數字。如果您傳遞另一種型別，它將根據標準 JavaScript 型別轉換規則自動轉換為數字。

IDL 屬性可以反映其他型別，例如無符號長整型、URL、布林值等。不幸的是，沒有明確的規則，IDL 屬性與其相應內容屬性的互動方式取決於屬性本身。大多數情況下，它會遵循規範中規定的規則，但有時並非如此。HTML 規範試圖使其儘可能對開發人員友好，但由於各種原因（主要是歷史原因），某些屬性的行為很奇怪（例如 select.size），您應該閱讀規範以確切瞭解它們的行為方式。

布林屬性

某些內容屬性（例如 required、readonly、disabled）被稱為布林屬性。如果布林屬性存在，其值為 true，如果不存在，其值為 false。

HTML 對布林屬性的允許值定義了限制：如果屬性存在，其值必須為空字串（等效地，屬性可以沒有賦值），或者一個與屬性規範名稱 ASCII 大小寫不敏感匹配的值，沒有前導或尾隨空格。以下示例是標記布林屬性的有效方式

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

需要明確的是，布林屬性不允許使用值 "true" 和 "false"。要表示 FALSE 值，必須完全省略該屬性。此限制澄清了一些常見的誤解：例如，對於 checked="false"，元素的 checked 屬性將被解釋為 true，因為該屬性存在。

事件處理程式屬性

除了上表中列出的屬性外，全域性事件處理程式（例如 onclick）也可以作為內容屬性在所有元素上指定。

所有事件處理程式屬性都接受一個字串。該字串將用於合成一個 JavaScript 函式，例如 function name(/*args*/) {body}，其中 name 是屬性的名稱，body 是屬性的值。處理程式接收的引數與其 JavaScript 事件處理程式對應項相同——大多數處理程式只接收一個 event 引數，而 onerror 接收五個：event、source、lineno、colno、error。這意味著您通常可以在屬性中使用 event 變數。

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

另見

• HTML 元素