:root{
--name: "*";
}
.test::before{
font-size: 13px;
Content: var(--name);
}
このcss変数をjsから
document.documentElement.style.setProperty("--name", "test");
というふうに操作したいのですが、これを実行しても * が消えるだけで test という文字が反映されません。
これの原因を教えて下さい。
CSSStyleDeclaration.setProperty()
において setProperty("--name", "test")
を呼び出したとき、プロパティに設定する値 test
は文字列ではなく、 test
という値となります。このため、 content
プロパティでは不正な値が設定されたことで、エラーが発生します。以上が「*
が消えるだけで test という文字列が反映されない」原因です。
この問題を解決するには、 setProperty
メソッドへ値を渡すときに、値が文字列だと明確にしなければなりません。このためには、異なる文字列リテラルや JSON.stringify
メソッドが使用出来ます。
document.documentElement.style.setProperty("--name", `"test"`);
// または `'test'` や "'test'" など
:root{
--name: "*";
}
.test::before{
font-size: 13px;
content: var(--name);
}
<div class="test"></div>
document.documentElement.style.setProperty("--name", JSON.stringify("test"));
:root{
--name: "*";
}
.test::before{
font-size: 13px;
content: var(--name);
}
<div class="test"></div>