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

CSS
この記事は約3分で読めます。
スポンサーリンク

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変数名に追加してるのでちょっと変わった書き方になっています。

SNSフォローボタン
エンデ・バタローをフォローする
CSSjavascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました