0

I have this function to setup initial values for css variables:

$(function() {
  $(":root").style.setProperty("--bkcolor", "hotpink");
  $(":root").style.setProperty("--fwcolor", "yellow");
  $(":root").style.setProperty("--fontfam", "Segoe UI");

  $(":root").style.setProperty("--bkcolor-header", "hotpink");
  $(":root").style.setProperty("--fwcolor-header", "yellow");
  $(":root").style.setProperty("--fontfam-header", "Segoe Script");

  $(":root").style.setProperty("--prc-navbar", "70%");

  $(":root").style.setProperty("--bkcolor-banner", "yellow");
  $(":root").style.setProperty("--fwcolor-banner", "hotpink");
  $(":root").style.setProperty("--fontfam-banner", "Segoe Script");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The function work fine except for $(":root").style.setProperty("--prc-navbar", "70%");

How to set values like 70%, 70px?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Federico
  • 81
  • 2
  • 7
  • I don't see how any of those work. `$(':root')[0].style.setProperty...` maybe, but jQuery objects don't have a `style` property, so you should be getting a TypeError on the first line. – Heretic Monkey May 21 '20 at 20:54
  • I am new to Jquery, before I had it like this: $ (":root").get(0).style.setProperty ("-- prc-navbar", "70%"); I removed the get(0) for testing and it works fine. Either way, the only one that doesn't work is "70%" Thanks for your response. – Federico May 21 '20 at 21:12
  • Well, that's the thing, when I run that code in my browser, Chrome Version 81.0.4044.138 (Official Build) (64-bit) on Windows 10, I get an error on the first line, "TypeError: Cannot read property 'setProperty' of undefined". So your question makes no sense to me. – Heretic Monkey May 21 '20 at 21:16
  • And, in fact, if you use the `[0]` syntax, everything works fine: https://jsfiddle.net/7L9gmhnd/1/. – Heretic Monkey May 21 '20 at 21:22
  • Look at this post: https://stackoverflow.com/questions/38002667/change-css-variable-using-jquery – Federico May 21 '20 at 21:30
  • ... And? `.get(0)` and `[0]` are the same thing... – Heretic Monkey May 21 '20 at 21:31

0 Answers0