---
description: 🚧 under construction
---

# attribute

[🔰 JS](../../../../js) ⟩ [browser](../../..) ⟩ [DOM](../..) ⟩ [types](..) ⟩ [Element]() ⟩ attribute

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

{% tabs %}
{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**attributes**</mark>
  * [id](attribute/id "mention")
* [attrs-vs-props](attribute/attrs-vs-props "mention")
* [dataset](attribute/dataset "mention")
{% 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](../../../../css "mention")
* [.attr](+ext/.attr "mention")
{% endtab %}
{% endtabs %}
