> 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/custom/prop.md).

# prop()

get / set css property value

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

```javascript
// ⭐️ prop(style, propName[,val])
//
//    get: 
//      • style.paddingLeft                 // get DOM style prop
//      • prop(style, 'padding-left')       // get CSS prop ⭐️
//      • prop(style, '--css-var')          // get CSS var ⭐️
//      
//    set: 
//      • prop(style, 'padding-left', '8px') // set CSS prop ⭐️
//      • prop(style, '--css-var', '4px')    // set CSS var ⭐️
//      • style.paddingLeft = '8px'          // set DOM style prop
function prop(style, propName, val=undefined){
  
    const camelCase = !propName.includes('-');
  
    // set prop if necessary
    if (val) {
      if (camelCase) style[propName] = val; // style.propName = val
      else style.setProperty(propName, val);// style.setProp('prop-name', val)
    }
  
    // return prop value
    return camelCase 
      ? style[propName]                    // style.propName
      : style.getPropertyValue(propName);  // style.getProp('prop-name') 
};
```

{% endtab %}

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

* [style.prop()](/web/browser/dom/type/cssstyledeclaration.md)
* [elem.styleProp()](/web/browser/dom/type/element/+ext/.styleprop.md)
* [elem.attr()](/web/browser/dom/type/element/+ext/.attr.md)
  {% endtab %}

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

* MDN ⟩ CSSStyleDeclaration ⟩ 
  * .[setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)()
  * .[getPropertyValue](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)()
    {% endtab %}
    {% endtabs %}