I am trying to set style of element with javascript, inside my typescript but it doesn't work. This is what I try to do:

const element = document.getElementsByClassName('current');
element.style.backgroundColor = "" + this.styles.style.mainIdentifyingColor;

but I get error:

Property 'style' does not exist on HTMLCollectionOf.

I also tried with setAttribute but same thing..

I am trying to set style of element with javascript, inside my typescript but it doesn't work. This is what I try to do:

const element = document.getElementsByClassName('current');
element.style.backgroundColor = "" + this.styles.style.mainIdentifyingColor;

but I get error:

Property 'style' does not exist on HTMLCollectionOf.

I also tried with setAttribute but same thing..

• javascript
• angular
• typescript

• 1 getElementsByClassName does not return an array. It returns an HTMLCollection as the error indicates. But, the premise is correct, – Randy Casburn Commented Apr 3, 2018 at 16:34
• This is not the idiomatic way of handling style changes in Angular. The framework provides many ways to change an element's style, and you should probably go through them instead of working around them. One simple reason being change detection. See angular.io/guide/ponent-styles | angular.io/guide/attribute-directives – msanford Commented Apr 3, 2018 at 16:48
• @msanford i know that, but in this specific case I have to do it like this – Nemanja Grabovac Commented Apr 4, 2018 at 11:21

2 Answers 2

I know am not exactly answering your question but did you try working with NgStyle ? docs

HTML

<div [ngStyle]="{ 'background-color': myCustomColor }"> 

</div>

TS

someFunctionToBeCalled() {
  this.myCustomColor=this.styles.style.mainIdentifyingColor;
}

You will need to iterate over the array of HTMLElements included in the HTMLCollection and set the style property on each.

OR

If you prefer to only set the style on the very first (or only, as you may see it) element with the class name of current, then you can do this:

const element = document.getElementsByClassName('current');
element[0].style.backgroundColor = "" + this.styles.style.mainIdentifyingColor;