为何无法用Spacebars为HTML元素插入style样式？

错误原因 #

你当前的写法是把完整的style="background-color:red;"字符串当作属性名称传给<td>，浏览器会尝试执行setAttribute('style="background-color:red;"', '')，这完全不符合HTML属性的语法规则，所以直接报错。

正确实现方式 #

方式1：拆分属性与值（最简洁） #

把JS数据改成仅提供样式值，模板中直接写死属性名：

• JS代码：

{ 'bgColor': 'red' }

• 模板代码：

<td class="left {{tableStyle}}" style="background-color:{{bgColor}};">{{value}}</td>

方式2：传递完整样式字符串（适合复杂样式） #

如果需要设置多组样式，直接传递样式内容，模板中把它放在style属性内部：

• JS代码：

{ 'backgroundStyle': 'background-color:red; color:white;' }

• 模板代码：

<td class="left {{tableStyle}}" style="{{backgroundStyle}}">{{value}}</td>

注：如果模板引擎自动转义引号导致样式失效，改用三重花括号输出原始内容：style="{{{backgroundStyle}}}"

关于你之前的尝试 #

你试的style={{data}}没生效，大概率是模板引擎的转义问题。比如当data是'background-color:red;'时，引擎会把引号转义成"，导致样式失效，此时用三重花括号关闭转义即可解决。

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