在活动类脚本中有一个自动突出显示的按钮

Question

我有一个更改文本字体系列的按钮列表。我想在选择某个选项时更改边框和文本颜色。

我的 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";
  });
}

.grid-item.fontactive {
  border-color: #06a0ff;
  color: #06a0ff;
}

<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>
  <button class="grid-item" 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>

Answer 1

只需将

fontactive

类添加到所需的

button

即可。

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";
  });
}

.grid-item.fontactive {
  border-color: #06a0ff;
  color: #06a0ff;
}

<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>
  <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>