javascript - element.style not working in typescript [Angular 5] - Stack Overflow

admin管理员组

文章数量:1343349

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

Share Improve this question Follow asked Apr 3, 2018 at 16:15 Nemanja GrabovacNemanja Grabovac 87822 gold badges1717 silver badges3030 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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;

本文标签： javascriptelementstyle not working in typescript Angular 5Stack Overflow