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

詳解

⬆️ 需要

📘 手冊

👥 相關

📗 參考

• W3School ⟩ CSS Default Values Reference

• JS.info ⟩ Styles and classes

📘 手冊

👥 相關

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.

example

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

CSS

HTML

⬆️ 需要

💾 程式