如何在闪电web组件中从JS传递值到HTML标签?



我试图从Javascript传递颜色到HTML标签的现有样式。然而,它不工作,因为我正在努力。请帮助。

实际的HTML

<template if:true={bmirange1}>
<div style="color: red; position:auto">BMI: {bmiValue}</div>
</template>

我在尝试什么

<template if:true={bmirange1}>
<div style="color:"{colorcode}"; position:auto">BMI: {bmiValue}</div>
</template>

你不能在模板中连接值,但是如果colorcodered作为默认值,你可以定义一个getter来返回style属性的整个内容:
JS

get divStyle() {
return `position:auto; color ${this.colorcode}`;
}

<template if:true={bmirange1}>
<div style={divStyle}>BMI: {bmiValue}</div>
</template>

你也可以在CSS文件中为该颜色定义一个合适的类,并通过自定义属性(即--bmi-color)设置颜色:

.dynamicColor {
color: var(--bmi-color, red);
}

在JS中,当colorcode属性改变时,你也必须设置这个css自定义属性:

document.documentElement.style.setProperty('--bmi-color', this.colorcode);

那么你的模板就是

<template if:true={bmirange1}>
<div class="dynamicColor" style="position:auto">BMI: {bmiValue}</div>
</template>

相关内容

  • 没有找到相关文章

最新更新