get/set CSS props

โญ๏ธ ๆณจๆ„๏ผš

ไธ่ฆๅฐ‡ Element.getAttribute()ใ€CSSStyleDeclaration.getPropertyValue() ่ˆ‡ Element.setAttribute()ใ€CSSStyleDeclaration.setProperty()ๆžๆททไบ†โ—๏ธ

// get: 
elem.style.color                // ไฝฟ็”จ <elem style="...">
getComputedStyle(elem).color    // โญ๏ธ computed style โ‰  elem.style.colorโ—๏ธ

// set: 
elem.style.color = 'pink';           // ่จญๅฎšๅ…งๅปบๆจฃๅผ
elem.styleProp('--css-var', '4px');  // ่จญๅฎš่‡ช่จ‚ css var

CSS vs. DOM style prop names

CSS prop (kebab case)
DOM prop (camel case)

'background-color'

elem.style.backgroundColor

'z-index'

elem.style.zIndex

'border-left-width'

elem.style.borderLeftWidth

code example

The style property operates only on the value of the "style" attribute, without any CSS cascade. ๐Ÿ‘‰๐Ÿป See "elem.style" tab below.

const {log} = console;

const p1 = $('p:nth-of-type(1)');
const p2 = $('p:nth-of-type(2)');

// css properties (kebab case)
const cssProps = [
  'background', 'color', 'background-color', 'border',
  'border-radius', 'padding', 'padding-left',
];

// DOM style properties (camel case, e.g. 'paddingLeft')
const styleProps = cssProps.map(prop => prop.kebabToCamelCase());

/*
  โญ๏ธ The `style` property operates only on the value of 
     the "style" attribute, WITHOUT any CSS cascadeโ—๏ธ
*/

//             โ•ญโ”€โ”€elem.styleโ”€โ”€โ•ฎ โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ style.getPropertyValue() โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
// css prop   | p1         p2  |  p1                       | p2
// -----------------------------------------------------------------------------------
// background | yellow     ''  | rgb(255, 255, 0) none ... | rgba(0, 0, 0, 0) none ...
// color      | red        ''  | rgb(255, 0, 0)            | rgb(0, 0, 0)
// bg-color   | yellow โญ๏ธ  ''  | rgb(255, 255, 0)          | rgba(0, 0, 0, 0)
// border     | ''         ''  | 1px solid rgb(0, 0, 0)    | same
// border-rad | ''         ''  | 4px                       | same
// padding    | ''         ''  | 0px 16px                  | same
// padding-l  | ''         ''  | 16px                      | same

// show elem.style
function showStyles2(elem){
  styleProps                              // color, border, ...
    .map(prop => elem.style[prop])        // style.color, style.border, ...
    .forEach(x => log(x));
}

// get computed styles
function showStyles3(elem){
  cssProps                                // border-radius, padding-left
    .map(prop => elem.styleProp(prop))    // getPropertyValue('border-radius'), ...
    .forEach(x => log(x));
}

showStyles2(p1);
showStyles2(p2);

showStyles3(p1);
showStyles3(p2);

// before set
log(p1.styleProp('padding-left'));      // 16px
log(p1.styleProp('paddingTop'));        // 0px
log(p1.style.paddingLeft);              // ''   โญ๏ธ
log(p1.style.paddingTop);               // ''   โญ๏ธ

// set
p1.style.paddingLeft = '100px'; 
p1.styleProp('padding-top', '30px');

// after set
log(p1.styleProp('padding-left'));      // 100px
log(p1.styleProp('paddingTop'));        // 30px

log(p1.style.paddingLeft);              // 100px
log(p1.style.paddingTop);               // 30px

Last updated