undefined style of elements

[EmersonGS]

I'm trying to toggle a background element that lives in my index.gui file. I tried to use the documentation to fix my issue, however i can never seem to alter any styles on the element through JS.

index.gui:

<svg>   
<g class="noon-bg">
    <gradientRect width="100%" height="100%"
      gradient-type="linear"
      gradient-x1="50" gradient-y1="0"
      gradient-x2="100%-50" gradient-y2="0"
      gradient-color1="#56CCF2" gradient-color2="#2F80ED" />
  </g>
</svg>

index.js:

import document from "document";
var noonBg = document.getElementsByClassName("noon-bg");
console.log(JSON.stringify(noonBg.style));

console:

[12:32:34 PM]undefined

I've attempted using ids before this with the same result.

[JonFitbit · Accepted solution]

getElementsByClassName() returns an array of objects which have the specified class name.

var noonBg = document.getElementsByClassName("noon-bg")[0];

If you're only ever having one, it's probably best to use an ID.

<svg>
  <svg id="noon-bg">
    <gradientRect />
  </svg>
</svg>

var noonBg = document.getElementById("noon-bg");

[EmersonGS]

Thanks for your answer, i think it had something to do with the parent element as well, using <svg> element worked like a charm.

Thanks,

Emerson