# Css Javascript

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

```javascript
const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  const suffix = this.dataset.sizing || ''; // || 을 넣는이유는 data-sizing값이 같은경우 없기때문에 넣어줌 없을때는 공백처리되게 해줌 
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); 
  // css 속성을 재할당 시킴 (IE8 이하는 setaAttribute를 써야함)
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
```

{% endtab %}

{% tab title="HTML" %}

```markup
   <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
    <label for="textSize" class="opt-title">Font size</label>
    <input type="range" name="textSize" min="20" max="78" value="14" data-sizing="px" />
    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>
     <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
```

{% endtab %}

{% tab title="CSS" %}

```css
 :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
      --textSize:20px;
    }

    img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl {
      color: var(--base);
      font-size:var(--textSize);
    }

    /*
      misc styles, nothing to do with CSS variables
    */

    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
    }
    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }
```

{% endtab %}
{% endtabs %}

### :root

&#x20; `:root`는 가상 선택자이기 때문에, html 셀렉터보다도 우선순위가 높습니다. 그래서 :root와 html에 대한 스타일을 동시에 선언하면, :root에 대한 스타일이 우선됩니다.

root는   **전역 스코프의 CSS 변수(사용자 정의 CSS속성)**&#xB97C; 선언할 때 사용

![](https://810537134-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZh1fxUzW3zjggiSfv4%2F-McqlI_6EVErctib7S4J%2F-Mcqmz42-uQcSZX454Oq%2Fimage.png?alt=media\&token=a0eca0d4-3644-4f16-b523-9bf7bacff3bf)