【jQuery】CSS変数をjQueryで利用する方法

CSSで指定したCSS変数をjQueryで利用する方法のご紹介です。
jQueryで変数作っちゃっても良いけど、そうできない時もある。
例えば、、、、ん～あるかなぁ。
jQueryで変数作れない時は、あるっ！としてCSS変数を書き換える方法です。
デモとjQueryでの書き換え方法です。

CSS変数を変更して四角の色を変えます

HTML

<div class="demo">
<select>
<option value="1">赤色</option>
<option value="2">青色</option>
<option value="3">緑色</option>
<option value="4">黄色</option>
</select>
<span></span>
</div>

CSS

.demo {
  --color1: #e35151;
  --color2: #5168e3;
  --color3: #0db96c;
  --color4: #e9c853;
}
.demo1 span {
  position: relative;
  display: block;
  margin: 0 auto;
  background: var(--color1);
  width: 250px;
  height: 130px;
  transition: 1.6s;
  border-radius: 10px;
  box-shadow: 0 10px 52px -11px var(--color1);
}

jQuery

$(".demo1__selectColor select").change(function() {
  var sc = $("select").val();
  $(".demo span").css({
    background: "var(--color" + sc + ")",
    boxShadow: "0 10px 52px -11px var(--color" + sc + ")"
  });
});

解説

CSSで作成した変数「–color1」～「–color4」をjQueryで利用します。
CSS変数をCSS上で指定する場合、「background: var(–color1);」のように記述します。
jQueryでも、同じような書き方でCSS関数を上書きしています。
今回は、「select」を変更したら「select」の値を取得して、その値をCSS変数名に追加してるのでちょっと変わった書き方になっています。