如何在EJS页面中添加style属性？代码可运行但存在提示问题

数据老陈

2026-7-20

问题描述

我在EJS页面里给元素加自定义背景色样式，代码能正常运行，但编辑器/开发工具一直弹出语法提示错误。

我的EJS代码片段：

<div class="card card_applicant">
    <div class="card_title" style="background-color: <%= aday.Renk %>;" >
        <h3 class="card-title"><%=(aday.Soyadi).toUpperCase() %></h3>
    </div>
</div>

编辑器提示的错误：

Unexpected token '<'
Property values expected

解决办法

1. 用EJS标签生成完整样式字符串

把style属性里的内容整个用EJS模板字符串生成，避免编辑器把EJS标签当成HTML语法错误：

<div class="card card_applicant">
    <div class="card_title" style="<%= `background-color: ${aday.Renk};` %>" >
        <h3 class="card-title"><%= aday.Soyadi.toUpperCase() %></h3>
    </div>
</div>

2. 把整个style属性用EJS输出

直接用EJS生成完整的style属性，编辑器就不会纠结里面的语法了：

<div class="card card_applicant">
    <div class="card_title" <%= `style="background-color: ${aday.Renk};"` %> >
        <h3 class="card-title"><%= aday.Soyadi.toUpperCase() %></h3>
    </div>
</div>

3. 用动态类名替代内联样式（推荐）

如果颜色是固定的几种，不如提前在CSS里写好对应的类，后端把颜色值转成类名，这样既没语法提示问题，还符合样式分离的规范：

/* 先写好CSS类 */
.bg-red { background-color: #ff0000; }
.bg-blue { background-color: #0000ff; }
/* 其他颜色类按需添加 */

<!-- EJS里直接加类名 -->
<div class="card card_applicant">
    <div class="card_title <%= aday.RenkClass %>" >
        <h3 class="card-title"><%= aday.Soyadi.toUpperCase() %></h3>
    </div>
</div>

注意这里需要后端把aday.Renk转换成对应的类名，比如原颜色是#ff0000，就返回bg-red。