如何使用JavaScript定位单词首字符并修改字号？新手代码求助

嘿，作为JavaScript新手，咱们一步步来搞定这个需求——定位"test"的首字符并修改它的字号。先看看你的现有代码，然后我会给出调整后的方案，每一步都讲清楚～

核心思路 #

要单独修改首字符的样式，最直接的方法是把首字符用一个<span>标签包裹起来，这样就能通过JS精准选中这个元素并修改它的字号。当然也可以用JS动态拆分文本并包裹，这样更灵活，咱们两种方式都聊聊。

方案1：手动包裹首字符（简单直观） #

先调整你的HTML结构，把test的首字符t用<span>包裹，给它加个类名方便选中：

<div id="logo">
  <style>
    #logo {
      transition: 0.3s ease;
    }
    /* 可以先给首字符设置默认样式，也可以完全靠JS控制 */
    .first-char {
      font-size: 2em;
    }
  </style>
  <h1 onmousemove="move()" onmouseout="out()">
    <span class="first-char">t</span>est
  </h1>
  <script>
    function move() {
      const logo = document.getElementById("logo");
      const firstChar = document.querySelector(".first-char");
      logo.style.color = "red";
      // 鼠标移入时放大首字符字号
      firstChar.style.fontSize = "3em";
    }

    function out() {
      const logo = document.getElementById("logo");
      const firstChar = document.querySelector(".first-char");
      logo.style.color = "black";
      // 鼠标移出时恢复默认字号
      firstChar.style.fontSize = "2em";
    }

    // 初始化执行一下函数（不过刚加载就执行的话，鼠标没在上面可能有点奇怪，你可以按需去掉）
    move();
    out();
  </script>
</div>

方案2：JS动态包裹首字符（更灵活） #

如果之后你想修改h1里的文本，不用手动去调整<span>，可以用JS在页面加载时自动拆分文本并包裹首字符：

<div id="logo">
  <style>
    #logo {
      transition: 0.3s ease;
    }
  </style>
  <h1 onmousemove="move()" onmouseout="out()">test</h1>
  <script>
    // 页面加载完成后，自动处理首字符
    window.addEventListener('load', () => {
      const h1 = document.querySelector('#logo h1');
      const text = h1.textContent;
      // 拆分首字符和剩余文本
      const firstChar = text.charAt(0);
      const restText = text.slice(1);
      // 重新组装HTML，包裹首字符
      h1.innerHTML = `<span class="first-char">${firstChar}</span>${restText}`;
    });

    function move() {
      const logo = document.getElementById("logo");
      const firstChar = document.querySelector(".first-char");
      logo.style.color = "red";
      firstChar.style.fontSize = "3em";
    }

    function out() {
      const logo = document.getElementById("logo");
      const firstChar = document.querySelector(".first-char");
      logo.style.color = "black";
      firstChar.style.fontSize = "1.5em"; // 恢复默认字号，你可以根据需求调整
    }
  </script>
</div>

小提示 #

• 用querySelector可以方便地选中特定元素，比如.first-char就是选中所有带这个类的元素
• 字号单位可以用em（相对于父元素字号）、px（固定像素）或者rem（相对于根元素字号），按需选择
• 把样式放在<style>标签里或者外部CSS文件会更规范，比直接用JS设置样式更易维护

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