JQueryを使用してCSSで使用される変数を変更することは可能ですか?簡単な例:
html {
--defaultColor: teal;
}
.box {
background: var(--defaultColor);
width: 100px;
height: 100px;
margin: 5px;
float: left;
}
.circle {
background: #eee;
border: 2px solid var(--defaultColor);
width: 100px;
height: 100px;
margin: 5px;
float: left;
border-radius: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickToChange" type="button" style="width: 100%;">Click to Change</button>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br/>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
たとえば、変数の色を青緑から赤に変更するにはどうすればよいですか?これは機能しません。
$("#clickToChange").click(function(){
$(html).css("--defaultColor", "red");
});
プレーンJavaScriptを使用してcss変数を変更できますelem.style.setProperty("variableName", "variableProp");
$("html").on('click', function() {
$("body").get(0).style.setProperty("--color", "hotpink");
});
body {
--color: blue;
background-color: var(--color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me!
最も簡単な解決策私見:クラスを変更すると、デフォルトの色が変更されます。
html {
--defaultColor: teal;
}
html.someOtherDefaultColor {
--defaultColor: rebeccapurple;
}
$("#clickToChange").click(function(){
$(html).toggleClass("someOtherDefaultColor");
});
質問を参照してください JavaScriptまたはjQuery を介してCSSカスタムプロパティ(別名CSS変数)を設定する
問題のメソッドはdocument.body.style.setProperty($property, value);
です。ここで$ propertyはCSS変数です。