英文:
Change color of popup (angular, TS)
问题
这是您要翻译的内容：
"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 popupopenToolTip($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 :)"请注意，我已经删除了代码部分并进行了翻译。如果您有任何其他需要，请随时告诉我。<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 fartooltip.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">&times;</a>
</div>```
EDIT:
I used the timeout function like Elikill58 said. Its a workaround but it solves my problem for now 
答案1
得分: 0
以下是翻译好的部分：
- 等待它。
你可以使用超时函数：
timeout(function() {var testvariable = document.getElementByID("popupId");testvariable.style.backgroundcolor = "green";}, 0);
- 使用
ngStyle设置样式。
如果样式应该依赖于值，你可以这样做：
<div [ngStyle]="{'background-color': something ? 'green' : 'red'}"></div>
- 更改默认样式。
这将更改所有弹出窗口的样式，无需进行JS操作：
.popup {background-color: green;}
- 使用 ID 更改样式。
如果你使用特定的ID，你可以这样做：
#popupId {background-color: green;}
所有这些方法都有优点和缺点，你应该选择与你所寻找的相对应的方法。
英文:
The problem comes from the element isn't known yet. You are checking it too fast. There is multiple way to fix it:
- Wait for it.
You can use the timeout function:
timeout(function() {var testvariable = document.getElementByID("popupId");testvariable.style.backgroundcolor = "green";}, 0);
- Set style with
ngStyle.
If the style should depend of values, you can do like:
<div [ngStyle]="{'background-color': something ? 'green' : 'red'}"></div>
- Change style by default.
This will change the style for all popup, without requiring JS manipulation:
.popup {background-color: green;}
- Change style with ID.
If you are using specific ID, you can do like:
#popupId {background-color: green;}
All ways have advantages and disadvantages, you should take the one that correspond to what you are looking for.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论