Search code examples
javascriptcssdomcss-variables

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.

Solution

  • 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))