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

// get
// ⭐️ 注意：`elem.style` 只存取來自 <... style="..."> 的樣式, 通常為 ''❗️ 
elem.style.backgroundColor    
elem.style.getPropertyValue('margin-top')  // ⭐️ = elem.style.marginTop

// ⭐️ computed style (read-only❗️)
//    此處為「套用所有樣式」後所得到的結果，所以一定有值。
getComputedStyle(elem).color  

// set
elem.style.display = "none"
style.setProperty('margin-top', '4px')    // ⭐️ style.marginTop = '4px'

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

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

body {
  background: #aaa;
}

p {
  border: 1px solid black;
  border-radius: 4px;
  padding: 0 1em;
}

<p style="background: yellow; color: red;">this is a paragraph</p>
<p>this is another paragraph.</p>

PreviousCSS properties NextLogical Properties

Last updated 2 years ago