JSでCSSの変数をセットする（CustomProperty）

　CSSのカスタムプロパティをJSで操作する。

成果物

• DEMO
• github

前回

• CSSでグローバル変数を定義する（CustomProperty）

コード

　--line-of-charsという変数を定義・参照・代入した例。

style.css

@charset "utf-8";
:root {
    --line-of-chars:20;
}
body {
    font-size: calc(100vw / var(--line-of-chars));
}

main.js

window.addEventListener('DOMContentLoaded', (event) => {
    const root = document.querySelector(':root');
    console.log(`before: ${root.style.getProperty('--line-of-chars')}`);
    root.style.setProperty('--line-of-chars', '10');
    console.log(`after: ${root.style.getProperty('--line-of-chars')}`);
});

　さらにHTMLの<input>を使ってUIにより値をセットする例。DEMO参照。

index.html

<script src="js/main.js"></script>

<input type="range" id="FontSize" name="FontSize" min="20" max="40" value="30" placeholder="30">

main.js

window.addEventListener('DOMContentLoaded', (event) => {
    const fontSize = document.querySelector('#FontSize');
    fontSize.addEventListener('input', e => {
        const root = document.querySelector(':root');
        root.style.setProperty('--line-of-chars', `${e.target.value}`);
    });
    fontSize.dispatchEvent(new Event('input'));
});

対象環境

• 2021-12-27
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.51-v7l+ #1333 SMP Mon Aug 10 16:51:40 BST 2020 armv7l GNU/Linux