# get/set CSS props

{% hint style="warning" %}
⭐️ 注意：

不要將 **Element**.[**getAttribute**](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)()、**CSSStyleDeclaration**.[**getPropertyValue**](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)() 與 **Element**.[**setAttribute**](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)()、**CSSStyleDeclaration**.[**setProperty**](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)()搞混了❗️
{% endhint %}

{% tabs %}
{% tab title="小抄" %}

```javascript
// 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
```

{% endtab %}

{% tab title="詳解" %}

```javascript
// 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'
```

{% endtab %}

{% tab title="⬆️ 需要" %}

* Element ⟩ [.styleProp()](/web/browser/dom/type/element/+ext/.styleprop.md)

{% endtab %}

{% tab title="📘 手冊" %}

* MDN ⟩&#x20;
  * CSSStyleDeclaration ⟩ .[setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty)(), .[getPropertyValue](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue)()
  * Window ⟩ .[getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)()
    {% endtab %}

{% tab title="👥 相關" %}

* [⭐️ Fav](/web/master/fav.md)
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="📗 參考" %}

* W3School ⟩ [CSS Default Values Reference](https://www.w3schools.com/cssref/css_default_values.asp)
* JS.info ⟩ [Styles and classes](https://javascript.info/styles-and-classes)
  {% endtab %}

{% tab title="📘 手冊" %}

* W3C ⟩ [Full Property List](https://www.w3.org/TR/CSS2/propidx.html)
  {% endtab %}

{% tab title="👥 相關" %}

* [HTML Attributes vs. DOM Properties](/web/browser/dom/type/element/attribute/attrs-vs-props.md)
* Element ⟩ [.styleProp()](/web/browser/dom/type/element/+ext/.styleprop.md)
  {% endtab %}
  {% endtabs %}

## CSS vs. DOM style prop names <a href="#css-vs-dom-prop-names" id="css-vs-dom-prop-names"></a>

| 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 <a href="#example" id="example"></a>

{% hint style="danger" %}
The **style** *property* operates only on the value of the "**style**" *attribute*, **without** any CSS cascade. 👉🏻 See "**elem.style**" tab below.
{% endhint %}

{% tabs %}
{% tab title="example" %}

```javascript
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
```

{% endtab %}

{% tab title="CSS" %}

```css
body {
  background: #aaa;
}

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

{% endtab %}

{% tab title="HTML" %}

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

{% endtab %}

{% tab title="⬆️ 需要" %}

* [$(), $all()](/web/browser/dom/querying-elements/dom.md)
* String ⟩ [.capitalize()](/web/js/val/prim/str/method/.capitalize.md), [.kebabToCamelCase()](/web/js/val/prim/str/method/.kebabtocamelcase.md)
* Element ⟩ [.styleProp()](/web/browser/dom/type/element/+ext/.styleprop.md)
  {% endtab %}

{% tab title="💾 程式" %}

* codepen ⟩ [elem.style](https://codepen.io/lochiwei/pen/mdwNEgK?editors=0011)
* replit ⟩ [style.setProperty()](https://replit.com/@pegasusroe/stylesetProperty#script.js) - set border, backgroundColor, color randomly.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/css/properties/get-set-css-props.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.