0

I'm pretty new to CSS, and I'm trying to make a button that can change width and height with a slider, while testing if I could get CSS variables working with JS, I couldn't

Javascript:

document.documentElement.style.cssText = "--zoom-button-width: 300"

CSS:

.zoomButton1 { width: var(--zoom-button-width); }
FrosT
  • 1
  • 2
  • related: https://stackoverflow.com/a/49618941/8620333 (you will find how to adjust CSS variables using JS/jquery – Temani Afif Oct 27 '20 at 20:40
  • Your value needs a unit. `300` what? 300 pixels? 300 miles? – Dai Oct 27 '20 at 20:40
  • Yeah, after posting this, I went to go test some things, and I tried both "--zoom-button-width: 300px" and "width: var(--zoom-button-width)px;" and neither of those worked – FrosT Oct 27 '20 at 20:43
  • related if you want to use uniteless properties: https://stackoverflow.com/q/57666183/8620333 – Temani Afif Oct 27 '20 at 20:44

2 Answers2

1

The magical line:

document.documentElement.style.setProperty('--zoom-button-width', '300px');
Piter
  • 96
  • 3
  • I think this worked. I say think, because when I run the program, it works for a split second and then instantly reverts. There is a possibility, that somewhere else in the code, my friend set the size of the boxes (it's a colab) and I don't know about it. – FrosT Oct 27 '20 at 20:55
0

Ok, so I found the issue, though I still have no clue what is causing it. I was going through things, and when I remove this piece of code, it works. 'document.documentElement.style.cssText = "--top-bar-color: #313440"' Edit: I switched it to 'document.documentElement.style.setProperty("--top-bar-color","#313440")' And it worked. Thanks for helping

FrosT
  • 1
  • 2
  • Setting the cssText as a whole would override all styles already applied to the element, so that's likely what was happening there. – Zachary Haber Oct 27 '20 at 21:35