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