3

I have a div tag with a style attribute, I'm trying to change the value of the style attribute with javascript

i've tried with 

document.getElementById("box").style

but still can't modify the --s variable

This is how it was originally:

Html

<div id="box" style="--s:1">

Then i took the style attribute in the js:

Html

<div id="box">

Javascript

document.getElementById("box").style="--s:1"

But still I don't know how can I modify --s with another value of another variable. thank you for your time and for any answers

EDIT: the code is based on the first answer of this topic: CSS 360 rotating progress radial using JS

Killon
  • 31
  • 1
  • 5
  • `i have a div tag with inside a style tag, ` <-- What?! If you really do, then you're code is wrong. Just show your actual code. – Scott Marcus Sep 09 '19 at 13:32
  • My code is based on the first answer of this topic https://stackoverflow.com/questions/55514182/css-360-rotating-progress-radial-using-js/55519869#55519869 @ScottMarcus – Killon Sep 09 '19 at 13:36
  • What the style you want it to be? Replace from `--s:1`, to what? – Mosh Feu Sep 09 '19 at 13:39
  • i want to switch between 0 and 1 based on a value passed by another javascript file, stored by using localstorage ecc ecc – Killon Sep 09 '19 at 13:41
  • In the provided example (from the post) they are using `setProperty` to change the style. – ctaleck Sep 09 '19 at 13:44
  • thank you guys i'm kinda dumb, sorry for for making you waste time – Killon Sep 09 '19 at 13:47

3 Answers3

4

the answer is in this post => CSS 360 rotating progress radial using JS

  deg = deg + 10;
  ele.style.setProperty("--v", deg+'deg');

you didn't read it correctly !

in your case this is:

document.getElementById("box").style.setProperty("--s", 1);

everything about this question is about CSS custom properties https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

I have done another sample code usage here: Html & JS rotate image 90 degrees on click

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
0

When you access the style property of a DOM object, you are accessing a CSSStyleDeclaration object. You don't set style equal to something. You access properties of that style object (left, color, top, etc.). If you assign a value to style, you wipe out the object stored in that property and instead just make the property hold the string you set it to, which breaks styling functionality.

If you want to change the value of the HTML style attribute (rather than accessing the style DOM property), use the setAttribute method:

document.getElementById("box").setAttribute("style", "--s:1");
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • This work only if there is only one property in the element style, because this remove the other properties – Mister Jojo Sep 09 '19 at 15:24
  • @MisterJojo As I state in my answer, this will set the HTML style attribute so that an inline style will be created. It doesn't affect properties of the CSSStyleDeclarations object beyond any property that is referenced in the value being set. No properties are removed. – Scott Marcus Sep 09 '19 at 15:38
  • You wrong, try with : `
    `, your code remove the `background: red;` part, or other ;)
     – Mister Jojo Sep 09 '19 at 17:25
  • @MisterJojo Yes, I understand that - that's obvious - you're setting a completely new value for the attribute. That's not what I'm referring to and not applicable to this question as the question is asking how to set a single property. – Scott Marcus Sep 09 '19 at 17:43
  • You play on words; in this case, it can be said that the PO did not mention that its property was necessarily unique – Mister Jojo Sep 09 '19 at 18:08
  • The OP clearly shows his HTML: `
    ` I think you've missed that completely. My answer is based on this.
     – Scott Marcus Sep 09 '19 at 18:26
  • it's just his example, what proves to you that his application does not use other properties? Of course these are all hypotheses, but your solution gives only a partial answer, as I indicated in my first message, and there is no point in fighting to value this scappy answer. – Mister Jojo Sep 09 '19 at 21:15
  • Because the OP clearly states what his code is?! None of us are mind readers and my answer is based on the code the OP said he was using. I'm not sure what it is you are trying to say here. We both agree that overwriting an attribute's value causes the old value to go away. In this case, the OP has clearly stated that a single value for the attribute is what he's after. – Scott Marcus Sep 09 '19 at 21:27
-2

try with attributes :

document.getElementById("box").getAttribute("style") // for reading value
document.getElementById("box").setAttribute("style", "background: red;") // for writing
EddiGordo
  • 682
  • 4
  • 10
  • Not true. It css variable: https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/#4-css-variables-can-be-used-in-html-s-style-attribute- – Mosh Feu Sep 09 '19 at 13:37
  • also html elements have a `style` property. there is no reason to use `getAttribute`. – I wrestled a bear once. Sep 09 '19 at 13:38
  • @Iwrestledabearonce. The `style` property returns a CSSStyleDeclaration object. `setAttribute` doesn't. – Scott Marcus Sep 09 '19 at 13:40
  • @ScottMarcus precisely (or rather, close enough).. if your goal is to get or set a background color as in this example, the CSSStyleDeclaration will be easier to get ot from than a string. – I wrestled a bear once. Sep 09 '19 at 13:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199192/discussion-between-i-wrestled-a-bear-once-and-scott-marcus). – I wrestled a bear once. Sep 09 '19 at 14:47