问题

这是您要翻译的内容：

"I build a custom popup which is visible when I click a button. When I click somewhere else on the document the popup should be closed / invisible. That works pretty well. Now I want to change the style property of this popup. The problem is that i cant change it. The code below returns that the HTML object is null but if i click another buttom with same functionality the style changes.

Thats my code so far

tooltip.component.ts

  popup = false;

  // open popup
  openToolTip($event: {
    target: any; stopPropagation: () => void; 
  }) 
  {
    
    $event.stopPropagation();
    this.popup = !this.popup;
    
   testvariable = document.getElementByID("popupId");
   testvariable.style.backgroundcolor = "green"; //backgroundcolor just for testing

  }
}

  // close popup if clicked on document
  @HostListener('document:click', ['$event']) onDocumentClick(event: any) {
    this.popup = false;
  }
 
  constructor() { }

  ngOnInit(): void {
  }

} ```

html

``` <span class="info-icon" (click)="openToolTip($event)">
    <mat-icon>info_outline</mat-icon>
</span>

<div *ngIf="popup" id="popupId" class="popup" (click)="$event.stopPropagation()">

    <div class="text-box">

    </div>

    <!-- close-button -->
    <a class="close" (click)="popup = false">&times;</a>
    
</div> ```

EDIT:
I used the timeout function like Elikill58 said. Its a workaround but it solves my problem for now :)"

请注意，我已经删除了代码部分并进行了翻译。如果您有任何其他需要，请随时告诉我。

<details>
<summary>英文:</summary>

I build a custom popup which is visible when I click a button. When I click somewhere else on the document the popup should be closed / invisible.
That works pretty well.
Now I want to change the style property of this popup. The problem is that i cant change it.
The code below returns that the HTML object is null but if i click another buttom with same functionality the style changes.






Thats my code so far

tooltip.component.ts

export class TooltipComponent implements OnInit {
popup = false;

// open popup
openToolTip($event: {
target: any; stopPropagation: () => void;
})
{

$event.stopPropagation();
this.popup = !this.popup;

testvariable = document.getElementByID("popupId");
testvariable.style.backgroundcolor = "green"; //backgroundcolor just for testing

}
}

// close popup if clicked on document
@HostListener('document:click', ['$event']) onDocumentClick(event: any) {
this.popup = false;
}

constructor() { }

ngOnInit(): void {
}

}

html

<span class="info-icon" (click)="openToolTip($event)">
<mat-icon>info_outline</mat-icon>
</span>

<div *ngIf="popup" id="popupId" class="popup" (click)="$event.stopPropagation()">

<div class="text-box">

</div>

<!-- close-button -->
<a class="close" (click)="popup = false">×</a>

</div>```

EDIT:
I used the timeout function like Elikill58 said. Its a workaround but it solves my problem for now

答案1

得分: 0

以下是翻译好的部分：

1. 等待它。

你可以使用超时函数：

timeout(function() {
   var testvariable = document.getElementByID("popupId");
   testvariable.style.backgroundcolor = "green";
}, 0);

2. 使用 ngStyle 设置样式。

如果样式应该依赖于值，你可以这样做：

<div [ngStyle]="{'background-color': something ? 'green' : 'red'}">

</div>

3. 更改默认样式。

这将更改所有弹出窗口的样式，无需进行JS操作：

.popup {
   background-color: green;
}

4. 使用 ID 更改样式。

如果你使用特定的ID，你可以这样做：

#popupId {
   background-color: green;
}

所有这些方法都有优点和缺点，你应该选择与你所寻找的相对应的方法。

timeout(function() {
   var testvariable = document.getElementByID("popupId");
   testvariable.style.backgroundcolor = "green";
}, 0);

<div [ngStyle]="{'background-color': something ? 'green' : 'red'}">

</div>

.popup {
   background-color: green;
}

#popupId {
   background-color: green;
}