83134

[code]

    :root{
        --name: "＊";
    }
    
    .test::before{
        font-size: 13px;
        Content: var(--name);
    }
    
[/code]

このcss変数をjsから

[code]

    document.documentElement.style.setProperty("--name", "test");
    
[/code]

というふうに操作したいのですが、これを実行しても ＊ が消えるだけで test という文字が反映されません。  
これの原因を教えて下さい。


CC BY-SA 4.0
2021-09-19T04:36:32.997
82575
2021-10-17T14:14:51.033
2021-10-17T00:41:11.553
32986
42126
question
javascript html css electron
setPropertyメソッドを使用してもcontentプロパティへ値が反映されない


`CSSStyleDeclaration.setProperty()` において `setProperty("--name", "test")`
を呼び出したとき、プロパティに設定する値 **`test` は文字列ではなく、 `test` という値**となります。このため、 `content`
プロパティでは不正な値が設定されたことで、エラーが発生します。以上が「`＊` が消えるだけで test という文字列が反映されない」原因です。

この問題を解決するには、 `setProperty`
メソッドへ値を渡すときに、値が文字列だと明確にしなければなりません。このためには、異なる文字列リテラルや `JSON.stringify`
メソッドが使用出来ます。

[code]

    document.documentElement.style.setProperty("--name", `"test"`);
    // または `'test'` や "'test'" など
[/code]

[code]

    :root{
        --name: "＊";
    }
    
    .test::before{
        font-size: 13px;
        content: var(--name);
    }
[/code]

[code]

    <div class="test"></div>
[/code]

[code]

    document.documentElement.style.setProperty("--name", JSON.stringify("test"));
[/code]

[code]

    :root{
        --name: "＊";
    }
    
    .test::before{
        font-size: 13px;
        content: var(--name);
    }
[/code]

[code]

    <div class="test"></div>
[/code]


CC BY-SA 4.0
2021-10-17T00:38:49.443
83134
2021-10-17T14:14:51.033
2021-10-17T14:14:51.033
32986
32986
82575
answer