Lightning Web Component中如何从JS向HTML标签样式传值？

你的写法因style属性的字符串拼接语法错误导致失效，以下是两种可行的修正方案：

方案1：直接在style属性内插值 #

使用反引号包裹style属性值，通过${变量名}的方式插入颜色变量：

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

方案2：绑定JS中的样式对象（推荐） #

先在JavaScript中定义包含样式的getter属性：

get bmiStyle() {
    return {
        color: this.colorcode,
        position: 'auto'
    };
}

再在模板中绑定这个样式对象：

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

错误原因说明 #

你之前的写法错误拆分了style属性的引号，导致浏览器无法正确解析样式内容，进而无法识别colorcode变量。上述两种方法都能让框架正确解析并插入动态颜色值。

内容的提问来源于stack exchange，提问作者Praveen Behera