> 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/+ext/.styleprop.md).

# elem.styleProp()

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

{% 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](/web/css/properties.md#get-set) - get/set CSS properties
  {% endtab %}

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

* [CSS Properties](/web/css/properties.md#get-set)
* [CSS Variables](/web/css/var.md)
  {% endtab %}

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

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