CSS properties not changing when using custom property variables

Question

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); }

related: stackoverflow.com/a/49618941/8620333 (you will find how to adjust CSS variables using JS/jquery — Temani Afif
– Temani Afif, Commented Oct 27, 2020 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
– FrosT, Commented Oct 27, 2020 at 20:43
related if you want to use uniteless properties: stackoverflow.com/q/57666183/8620333 — Temani Afif
– Temani Afif, Commented Oct 27, 2020 at 20:44

Piter · Accepted Answer · 2020-10-27 20:45:09Z

1

The magical line:

document.documentElement.style.setProperty('--zoom-button-width', '300px');

answered Oct 27, 2020 at 20:45

Piter

1163 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FrosT Over a year ago

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 · Accepted Answer · 2020-10-27 21:10:57Z

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

edited Oct 27, 2020 at 21:10

answered Oct 27, 2020 at 21:05

FrosT

13 bronze badges

1 Comment

Zachary Haber Over a year ago

Setting the cssText as a whole would override all styles already applied to the element, so that's likely what was happening there.

Collectives™ on Stack Overflow

CSS properties not changing when using custom property variables

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related