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?

Improve this question
6
  • 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. Commented May 21, 2020 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. Commented May 21, 2020 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. Commented May 21, 2020 at 21:16
  • And, in fact, if you use the [0] syntax, everything works fine: jsfiddle.net/7L9gmhnd/1. Commented May 21, 2020 at 21:22
  • Look at this post: stackoverflow.com/questions/38002667/… Commented May 21, 2020 at 21:30
Related questions
2
How to pass numerical values to jQuery's .css()?
11
CSS selectors cannot match numerical attribute values? why?
2
How to use numbers from a js file in the css sheet?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.