页面加载时如何让默认字体Georgia按钮自动添加active高亮样式？

有两种简单的实现方式，根据需求选择即可：

方法1：直接修改HTML（最便捷） #

既然Georgia是默认字体，直接在对应的按钮标签里添加fontactive类，页面加载时就会自动应用高亮样式，无需改动任何JS代码。

修改后的HTML代码片段：

<div class="fontsgrid" id="fontlist">
  <button class="grid-item" id="ff-garamond" onclick="changeFontFamily('EB Garamond')">Garamond</button>
  <button class="grid-item" id="ff-palatino" onclick="changeFontFamily('Palatino')">Palatino</button>
  <button class="grid-item" id="ff-bookerly" onclick="changeFontFamily('Bookerly')">Bookerly</button>
  <!-- 默认高亮的Georgia按钮 -->
  <button class="grid-item fontactive" id="ff-georgia" onclick="changeFontFamily('Georgia')">Georgia</button>
  <button class="grid-item" id="ff-baskerville" onclick="changeFontFamily('Baskerville')">Baskerville</button>
  <button class="grid-item" id="ff-montserrat" onclick="changeFontFamily('Montserrat')">Montserrat</button>
  <button class="grid-item" id="ff-futura" onclick="changeFontFamily('Futura')">Futura</button>
  <button class="grid-item" id="ff-opendyslexic3" onclick="changeFontFamily('OpenDyslexic3')">Open Dyslexic</button>
</div>

方法2：通过JavaScript动态添加类 #

如果默认字体是动态设置的，或者不想修改HTML结构，可以在现有JS代码末尾添加一段逻辑，确保页面加载完成后给Georgia按钮加上高亮类。

修改后的JavaScript代码：

var fontbtns = document.getElementsByClassName("grid-item");
for (var i = 0; i < fontbtns.length; i++) {
  fontbtns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("fontactive");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" fontactive", "");
    }
    this.className += " fontactive";
  });
}

// 页面加载完成后，为默认字体按钮添加高亮类
document.addEventListener('DOMContentLoaded', function() {
  const defaultBtn = document.getElementById('ff-georgia');
  if (defaultBtn) {
    defaultBtn.classList.add('fontactive');
  }
});

这里用classList.add()比直接拼接className更安全，能避免重复添加类名的问题。

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