如何用JavaScript给HTML标题首字母添加样式

在网页排版中，为标题的首字母设置不同于其余文字的样式，能够起到强调和装饰的作用。借助JavaScript，我们可以在页面加载后自动处理所有指定的标题元素，避免手工改写HTML的麻烦。

实现原理

核心逻辑是遍历选中的标题节点，读取其文本，将第一个字符用<span>包裹并赋予特定类名，再把拼接好的HTML重新赋值给标题。这样CSS就能针对该类名设置样式。

基础代码示例

以下代码会为页面中所有<h2>标题的首字母添加名为first-letter的样式类：

// 获取所有 h2 标题
const headings = document.querySelectorAll('h2');

headings.forEach(function(heading) {
  // 获取标题文本
  const text = heading.textContent;
  if (!text) return;

  // 提取首字母与剩余部分
  const first = text.charAt(0);
  const rest = text.slice(1);

  // 用 span 包裹首字母并写回
  heading.innerHTML = '<span class="first-letter">' + first + '</span>' + rest;
});

配套CSS样式

在CSS中定义first-letter类的外观，例如改为红色并放大：

.first-letter {
  color: #e74c3c;
  font-size: 1.4em;
  font-weight: bold;
}

处理包含嵌套标签的情况

如果标题内部已经包含其他HTML标签，直接读取textContent再写innerHTML会丢失原有结构。此时可使用childNodes处理文本节点：

function styleFirstLetter(element) {
  const nodes = element.childNodes;
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
      const text = node.textContent;
      const first = text.charAt(0);
      const rest = text.slice(1);
      const span = document.createElement('span');
      span.className = 'first-letter';
      span.textContent = first;
      const frag = document.createDocumentFragment();
      frag.appendChild(span);
      frag.appendChild(document.createTextNode(rest));
      element.replaceChild(frag, node);
      break;
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      styleFirstLetter(node);
    }
  }
}

document.querySelectorAll('h3').forEach(styleFirstLetter);

小结

通过上述JavaScript方案，我们可以灵活地为HTML标题首字母添加样式，既支持简单标题，也能兼容嵌套结构。实际项目中只需根据标题标签类型调整选择器即可。

JavaScriptHTML_title首字母样式修改时间：2026-07-28 03:30:15