问题描述
我在使用 Typescript 时遇到问题，我正在尝试在 HTMLElement 上应用样式，代码如下：
styleChoice(element:HTMLElement){
console.log(element);
element.style.background="rgba(228,48,0.2)";
element.style.borderRadius="40px";
}
test(){
console.log(document.getElementById('test'));
this.styleChoice(document.getElementById('test'));
}
我不明白为什么不起作用。
解决方法
您应该使用 Renderer2 来实现这一点。这将是一个不错的选择。请勿直接在应用中使用该文档，请查看 here 了解详情。
export class DemoComponent {
constructor(
private element: ElementRef,private renderer: Renderer2,){
}
styleChoice(element:HTMLElement){
console.log(element);
//element.style.background="rgba(228,48,0.2)";
renderer.setStyle(el,'background','red');
renderer.setStyle(el,'borderRadius','40px');
// element.style.borderRadius="40px";
}
test(){
console.log(document.getElementById('test'));
this.styleChoice(document.getElementById('test'));
}
}
您可以在此处查看 renderer2 文档。
,这不是 Angular 的方式，Angular 的方式是使用变量和 [ngStyle]
例如
//in .ts
style={
"background":"rgba(228,0.2)","borderRadius":"40px"
}
//in .html
<some-element [ngStyle]="style">...</some-element>
//or directly
<some-element [ngStyle]="{'background':'rgba(228,0.2)','borderRadius':'40px'}">
...
</some-element>
您可以根据变量更改样式，例如
variable=true;
<some-element [ngStyle]="variable?style:null">...</some-element>
如果只想更改一个属性，您可以使用 [style.property]
//in .ts
backgroundColor="rgba(228,0.2)"
//in .html
<some-element [style.background]="backgroundColor">...</some-element>