# elem.styleProp()

[🔰 JS](https://lochiwei.gitbook.io/web/js) ⟩ [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) ⟩ 

{% hint style="danger" %}
⭐️ 注意：\
從 [**getComputedStyle**](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)(elem) 得到的 style 是**唯讀的** (read-only)，不可設定新值給它，否則會產生以下錯誤❗️

🧨 **NoModificationAllowedError**: Failed to set the '`padding-left`' property on '**CSSStyleDeclaration**': These styles are **computed**, and therefore the '`padding-left`' property is **read-only**.
{% endhint %}

{% tabs %}
{% tab title=".styleProp()" %}

```javascript
// ⭐️ elem.styleProp(prop[,val])
//    get: 
//         elem.styleProp('padding-left') 
//       = elem.styleProp('paddingLeft')
//       = getComputedStyle(elem).paddingLeft
//       ≠ elem.style.paddingLeft ❗️
//    set: 
//         elem.styleProp('padding-left', '8px') 
//       = elem.styleProp('paddingLeft', '8px')
//       = elem.style.paddingLeft = '8px'
Element.prototype.styleProp = function(prop, val=undefined){
  
    const camelCase = !prop.includes('-');
  
    // set prop if necessary
    // ⭐️ Note: 
    //    getComputedStyle() is read-only, DO NOT use it to set new value,
    //    use `this.style` instead❗️
    if (val) {
      if (camelCase) this.style[prop] = val;
      else this.style.setProperty(prop, val);  // kebab case
    }
  
    // return prop  
    const style = getComputedStyle(this);
    return camelCase ? style[prop] : style.getPropertyValue(prop);    
};
```

{% endtab %}

{% tab title="func" %}

```javascript
// ⭐️ elem.styleProp(prop[,val])
//    get: 
//         elem.styleProp('padding-left') 
//       = elem.styleProp('paddingLeft')
//       = getComputedStyle(elem).paddingLeft
//       ≠ elem.style.paddingLeft ❗️
//    set: 
//         elem.styleProp('padding-left', '8px') 
//       = elem.styleProp('paddingLeft', '8px')
//       = elem.style.paddingLeft = '8px'
function styleProp(elem, prop, val=undefined){
  
    const camelCase = !prop.includes('-');
  
    // set prop if necessary
    // ⭐️ Note: 
    //    getComputedStyle() is read-only, DO NOT use it to set new value,
    //    use `this.style` instead❗️
    if (val) {
      if (camelCase) elem.style[prop] = val;
      else elem.style.setProperty(prop, val);  // kebab case
    }
  
    // return prop  
    const style = getComputedStyle(elem);
    return camelCase ? style[prop] : style.getPropertyValue(prop);    
};
```

{% endtab %}

{% tab title="📗 參考" %}

* JS.info ⟩ [Styles and classes](https://javascript.info/styles-and-classes)
  {% endtab %}

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

* **Window** ⟩ .[getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)() - returns an **object** (***live*** [`CSSStyleDeclaration`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) object) containing the values of all **CSS properties** of an element.<br>
* **CSSStyleDeclaration** ⟩&#x20;
  * .[getPropertyValue](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)() : [`DOMString`](https://developer.mozilla.org/en-US/docs/Web/API/DOMString) `| ''`
  * .[setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)()

```javascript
window.getComputedStyle(elem);
window.getComputedStyle(elem, pseudoElem);

// style get/set property
var value = style.getPropertyValue(prop);
style.setProperty(prop, value, priority);
```

{% endtab %}

{% tab title="⬇️ 應用" %}

* [CSS Properties](https://lochiwei.gitbook.io/web/css/properties#get-set) - get/set CSS properties
  {% endtab %}

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

* [CSS Properties](https://lochiwei.gitbook.io/web/css/properties#get-set)
* [CSS Variables](https://lochiwei.gitbook.io/web/css/var)
  {% endtab %}

{% tab title="💾 程式" %}

* codepen ⟩ [elem.style](https://codepen.io/lochiwei/pen/bGRXERG?editors=0111)
  {% endtab %}
  {% endtabs %}