如何通过内联JS定位div元素的首字母并设置样式？

嘿，问题出在div.firstLetter这里——:first-letter是CSS伪元素，并不是真实存在的DOM节点，所以JavaScript根本没法直接访问它的样式属性，这就是你的代码失效的原因。

既然只能用内联JS，我们可以换个思路：把首字母单独用<span>标签包裹起来，然后直接给这个span设置样式。这样就能绕过伪元素的限制，实现你要的效果。

修改后的代码示例： #

<script>
  // 拿到问候文本
  const greetingText = unit.greeting;
  
  // 处理非空文本的情况
  if (greetingText) {
    // 拆分首字母和剩余内容
    const firstLetter = greetingText.charAt(0);
    const remainingText = greetingText.slice(1);
    
    // 重新组装HTML，给首字母套上带样式的span
    div.innerHTML = `<span style="color: orange;">${firstLetter}</span>${remainingText}`;
  } else {
    // 空文本直接赋值，避免报错
    div.innerHTML = greetingText;
  }
  
  // 设置整体文字颜色
  div.style.color = "gray";
</script>

输出的HTML效果： #

<div style="color: gray;">
  <span style="color: orange;">H</span>ello
</div>

这个方法的核心是把首字母转化为可被JS直接操作的DOM元素，这样就能轻松控制它的样式了。如果你的问候文本可能包含特殊字符（比如HTML实体），可以用textContent来插入内容避免XSS风险，不过广告工具里的unit.greeting应该是安全的文本内容，直接用模板字符串拼接没问题。

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