如何通过CSS修改字符串变量userData.name的显示字体颜色

以下是不同开发场景下的实现方式：

原生HTML/JavaScript场景 #

• 行内样式快速实现：
  直接操作DOM样式属性，适合临时修改需求：

  // 给用户名包裹span标签设置行内样式后插入页面
  const userNameEle = `<span style="color: #fff;">${userData.name}</span>`
  // 替换原有内容或插入到对应容器即可
  

• CSS类名统一管理（更推荐，方便后续批量修改样式）：
  先在CSS文件中定义样式类：

  .user-name {
    color: #fff;
    font-weight: 600; /* 可选：加粗进一步提高辨识度 */
  }
  

  再给渲染用户名的DOM元素添加对应类名：

  const nameDom = document.getElementById('user-name-wrap')
  nameDom.textContent = userData.name
  nameDom.classList.add('user-name')
  

Vue 框架场景 #

• 行内样式写法：

  <template>
    <!-- 直接绑定行内样式 -->
    <span :style="{ color: '#fff' }">{{ userData.name }}</span>
  </template>
  

• 类名写法：

  <template>
    <span class="user-name">{{ userData.name }}</span>
  </template>
  
  <style scoped>
  .user-name {
    color: #fff;
  }
  </style>
  

React 框架场景 #

• 行内样式写法：

  {/* 直接绑定行内样式 */}
  <span style={{ color: '#fff' }}>{userData.name}</span>
  

• 类名写法：

  // JSX 部分
  <span className="user-name">{userData.name}</span>
  
  // CSS 部分
  .user-name {
    color: #fff;
  }
  

提示：如果需要使用其他自定义颜色，替换代码中的#fff为对应色值、RGB/RGBA值、CSS内置颜色名即可。

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