やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

JSでCSSの変数をセットする(CustomProperty)

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

成果物

前回

コード

 --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'));
});

対象環境

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