CODEWITHSUNDEEP
javascriptjquerycssunicode
Osman
Osman

Reputation: 165

How to change a CSS variable unicode using Javascript?

I have a CSS variable on an element.

<div style="--background:example"></div>

The CSS variable is changed dynamically in jQuery with

$("div").css("--background",newValue)

In CSS itself, I am able to have the background dynamically change from a pseudo element like so:

div::after {
    content: '';
    background: var(--background);
}

This works fine - however, how can I go about changing the variable to different unicodes?

If I set newValue to \f099 for example, jQuery passes it as 99.

I have also tried \\f099, but that gets formatted as a literal unicode before passing and so the effects aren't applied.

If I use \\f099, the CSS Inspector displays the value of the CSS variable as a box (as if it were an actual unicode).

If I set the unicode manually in a CSS file, it displays normally, even in the inspector

Upvotes: 0

Views: 260

Answers (1)

Josef Wittmann
Josef Wittmann

Reputation: 1359

I assume you want to set the content to \f099.

The value for content has to be surrounded by quotes and backslash has to be escaped. Do the following:

$("div").css("--content", '"\\f099"')

This will set the variable to "\f099".

Upvotes: 1

Related Questions