> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/dom/type/element/attribute.md).

# attribute

🚧 under construction

[🔰 JS](/web/js.md) ⟩ [browser](/web/browser.md) ⟩ [DOM](/web/browser/dom.md) ⟩ [types](/web/browser/dom/type.md) ⟩ [Element](/web/browser/dom/type/element.md) ⟩ attribute

{% hint style="success" %}
🚧
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* <mark style="color:yellow;">**attributes**</mark>
  * [id](/web/browser/dom/type/element/attribute/id.md)
* [attributes vs. properties](/web/browser/dom/type/element/attribute/attrs-vs-props.md)
* [data attributes](/web/browser/dom/type/element/attribute/dataset.md)
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:yellow;">**HTML attributes**</mark> are <mark style="color:red;">**not**</mark> <mark style="color:orange;">**case sensitive**</mark>, but <mark style="color:yellow;">**JavaScript property names**</mark> <mark style="color:red;">**are**</mark>.
{% endhint %}

{% hint style="info" %}
HTML attributes are usually <mark style="color:yellow;">**strings**</mark> with exceptions:

* when attribute is a <mark style="color:orange;">**boolean**</mark> or <mark style="color:orange;">**numeric**</mark> value.

* elem.style is an object ([CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)).

* <mark style="color:yellow;">**event handler attribute**</mark> is <mark style="color:red;">**function**</mark> or <mark style="color:orange;">**null**</mark>.
  {% endhint %}

* convert HTML attribute name to JS property name:

```javascript
 HTML attribute        JS property
--------------------------------------------
data-first-name=""    elem.dataset.firstName  // "data-" attribute
```

* exceptions

```javascript
 HTML attribute    JS property
--------------------------------------------
 class=""          elem.className, elem.classList
 for=""            label.htmlFor
 value=""          input.defaultValue  // `input.value`: user's current input 
 --------------------------------------------
```

{% endtab %}

{% tab title="📘 手冊" %}

* Element ⟩&#x20;
  * [.classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) ([DOMTokenList](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList)) - can add(), remove(), contains(), toggle() ...
  * HTMLElement ⟩
    * [.style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) ([CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration))
      {% endtab %}

{% tab title="👥 相關" %}

* [CSS](/web/css.md)
* [elem.attr()](/web/browser/dom/type/element/+ext/.attr.md)
  {% endtab %}
  {% endtabs %}