CSSカスタムプロパティのサンプルページ

1. このページの目的

Custom properties (CSS variables) を利用したサンプルページです。

2. デモ1

下記に適用されている --main-demo-color の値自体を変更することによって、色を変更する。

ここの文字色は CSSカスタムプロパティを使って指定しています。
また、CSSカスタムプロパティを使って変更します。

コード

HTML

<div class="demo demo1">
  ここの文字色は CSSカスタムプロパティを使って指定しています。<br>
  また、CSSカスタムプロパティを使って変更します。
</div>

<button id="btn1">上記の色を変更する</button>

CSS

:root {
  --demo1-color: blue;
}
.demo1 {
  color: var(--demo1-color);
}

JavaScript

document.querySelector('#btn1').addEventListener('click', () => {
  const root = document.querySelector(':root');
  root.style.setProperty("--demo1-color", 'red');
});

3. デモ2

適用するCSSカスタムプロパティを変えることによって、下記の色を変更する。

最初は --demo2-color1 が適用されているが、JavaScript を使って、--demo2-color2 に変更する。

ここの文字色は CSSカスタムプロパティを使って指定しています。
また、CSSカスタムプロパティを使って変更します。

コード

HTML

<div class="demo demo2" id="demo2">
  ここの文字色は CSSカスタムプロパティを使って指定しています。<br>
  また、CSSカスタムプロパティを使って変更します。
</div>

<button id="btn2">上記の色を変更する</button>

CSS

:root {
  --demo2-color1: blue;
  --demo2-color2: green;
}
.demo2 {
  color: var(--demo2-color1);
}

JavaScript

document.querySelector('#btn2').addEventListener('click', () => {
  const root = document.querySelector(':root'),
    rootStyle = getComputedStyle(root),
    demo2 = document.querySelector('#demo2');
  demo2.style.color = rootStyle.getPropertyValue('--demo2-color2');
});

3. 参考