CSSStyleDeclaration

style.prop()

.prop()

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

prop()

// ⭐️ style.prop(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') 
};

📘 手冊

• MDN ⟩ CSSStyleDeclaration

👥 相關

• Element ⟩ .styleProp()

• CSS ⟩ get/set props

• global prop()⭐️ Fav