JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでCSS変数を取得・設定する方法

JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。

1. getComputedStyle() ― 適用済みスタイルの取得

getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。

2. getPropertyValue() ― 目的のプロパティ値の取得

getComputedStyle()が返したオブジェクトに対してgetPropertyValue()メソッドを呼び出すと、引数に指定したプロパティ（ここではCSS変数名）の現在の値を取得できます。

3. setProperty() ― CSS変数の値の変更

要素のstyleオブジェクトに対してsetProperty()メソッドを使うと、CSS変数の値を上書きできます。第1引数に変数名、第2引数に新しい値を渡します。

例1：マウスオーバーで色を表示・変更する

以下のサンプルでは、div要素にマウスカーソルを重ねると、その時点でのCSS変数 --innerColor の値が段落に表示され、カーソルが外れると色が magenta に切り替わります。

<!DOCTYPE html>
<html>
<head>
<style>
:root {
    --outerColor: magenta;
    --innerColor: lightgreen;
    text-align: center;
}
div {
    margin: 5%;
    padding: 10%;
    background-color: var(--innerColor);
    border: 2px groove var(--outerColor);
}
</style>
</head>
<body>
<div onmouseover="showColor()" onmouseout="changeColor()">
<p></p>
</div>
</body>
<script>
let ele = document.querySelector(':root');
let para = document.querySelector('p');
function showColor() {
    let cs = getComputedStyle(ele);
    para.textContent = ('元の色は ' + cs.getPropertyValue('--innerColor') + ' です');
}
function changeColor() {
    let item = document.querySelector('div');
    item.style.setProperty('--innerColor', 'magenta')
}
</script>
</html>

出力結果

このコードを実行すると、次のような結果が得られます。

JavaScriptでCSS変数を取得・設定する方法

例2：マウスオーバーで色をトグルする

次の例では、div要素にマウスを重ねるたびに、現在の --customColor の値をチェックし、blue でなければ blue へと切り替えます。条件分岐によって、変数の値を読み取ってから書き込む一連の流れを確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
:root {
    --customColor: seagreen;
}
div {
    margin: 5%;
    width: 130px;
    height: 130px;
    box-shadow: inset 0 0 38px var(--customColor);
    border-radius: 50%;
}
</style>
</head>
<body>
<div onmouseover="toggle()"></div>
</body>
<script>
let ele = document.querySelector(':root');
function toggle() {
    let cs = getComputedStyle(ele);
    let item = document.querySelector('div');
    if(cs.getPropertyValue('--customColor') !== 'blue') {
        item.style.setProperty('--customColor', 'blue')
    }
}
</script>
</html>

出力結果

このコードを実行すると、次のような結果が得られます。

JavaScriptでCSS変数を取得・設定する方法

まとめ

CSS変数の取得には「getComputedStyle(要素).getPropertyValue('--変数名')」、設定には「要素.style.setProperty('--変数名', 値)」という組み合わせを使います。この2つを覚えておけば、テーマカラーの動的な切り替えなど、柔軟なスタイル制御をシンプルなコードで実装できます。

  1. JavaScriptとCSSで作る！タイプライター風の文字入力・削除エフェクトの実装方法

    CSSアニメーションとJavaScriptを組み合わせることで、まるでタイプライターで打っているかのような「文字の入力」と「削除」を繰り返すエフェクトを実装できます。Webサイトのヒーローセクションやキャッチコピーの演出など、訪問者の目を引く演出として幅広く活用できる人気のテクニックです。以下のサンプルコードでは、複数のテキストを順番にタイプ表示し、すべて表示し終えると今度は1文字ずつ削除していく動きを再現しています。実装例<!DOCTYPE html> <html> <style> div {    display: flex; &nb

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini