从 Angular 5 中的组件动态更改 css 样式 [英] changing css style dynamically from component in Angular 5

问题描述

我正在使用物化范围:

<input type="range" id="test5" min="0" max="100" #ranger (input)="yourMethod(ranger.value)"/>

这个输入在 HTML span 标签中创建，带有类拇指，如何通过更改范围来动态更改颜色?是否可以在 css .thumb {background-color: somevariable} 中定义，并从组件中更改它?

解决方案

可以通过组件中定义的变量动态设置html中的颜色.

<p [style.color]="变量"></p>

定义组件中变量的值.但是请确保您定义了默认值，否则会引发错误.

I am using materialized range:

<div class="range-field  col s6">
  <input type="range" id="test5" min="0" max="100"  #ranger (input)="yourMethod(ranger.value)"/>
</div>

This input creates in HTML span tag with class thumb, how could I change the color dynamically by changing the range? Is it possible to define in css .thumb {background-color: somevariable}, and change it from the component?

解决方案

You can dynamically set the color in html through a variable defined in the component.

<p [style.color]="variable"></p>

define the value of variable in component. But make sure you have a default value defined otherwise it will throw an error.

这篇关于从 Angular 5 中的组件动态更改 css 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！