CODEWITHSUNDEEP
javascriptcssdomcss-variables
vsync
vsync

Reputation: 130175

Set CSS custom property/variable from javascript as type String

Consider the following scenario:

document.body.style.setProperty("--text", "world")
body::before{
  --text: "Hello";
  content: var(--text, "...");
}

body::after{
  content: var(--text, "...");
}

CSS is able to set a type to the variable by having the value of the custom property --text with quotes, but when done the same with javascript setProperty this is the outcome of the (inspected) node (in Chrome) which is without quotes, which makes it impossible to use as content value of a pseudo-element:

enter image description here

Can this somehow be done via JS using setProperty? (assuming the element already has a bunch of stuff in its style attribute which I don't want to mess with.

Upvotes: 6

Views: 5586

Answers (2)

chri3g91
chri3g91

Reputation: 1410

If one is utilizing data-binding properties, e.g. Knockout JS, you could set the "" string value using Template literal syntax

HTML

<div data-bind="style: {'--text': self.Word() }" style='--prefix: "";'>

JS

self.Word = ko.observable(`"${word}"`)

Upvotes: 0

vsync
vsync

Reputation: 130175

Set it as so:

document.body.style.setProperty("--text", "'world'")

The problem is now this:

var word = "world";

document.body.style.setProperty("--text", word)
body::before{
  --text: "Hello";
  content: var(--text, "...");
}

body::after{
  content: var(--text, "...");
}

Which can be solved by:

document.body.style.setProperty("--text", JSON.stringify(word))

Upvotes: 5

Related Questions