# attribute

[🔰 JS](https://lochiwei.gitbook.io/web/js) ⟩ [browser](https://lochiwei.gitbook.io/web/browser) ⟩ [DOM](https://lochiwei.gitbook.io/web/browser/dom) ⟩ [types](https://lochiwei.gitbook.io/web/browser/dom/type) ⟩ [Element](https://lochiwei.gitbook.io/web/browser/dom/type/element) ⟩ attribute

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

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

* <mark style="color:yellow;">**attributes**</mark>
  * [id](https://lochiwei.gitbook.io/web/browser/dom/type/element/attribute/id "mention")
* [attrs-vs-props](https://lochiwei.gitbook.io/web/browser/dom/type/element/attribute/attrs-vs-props "mention")
* [dataset](https://lochiwei.gitbook.io/web/browser/dom/type/element/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](https://lochiwei.gitbook.io/web/css "mention")
* [.attr](https://lochiwei.gitbook.io/web/browser/dom/type/element/+ext/.attr "mention")
  {% endtab %}
  {% endtabs %}