javascript - 函数执行 10 次中的 1 次，函数没有进行必要的更改

Question

使用以下 Javascript 代码，我遇到了 1 个问题。

TL；DR：我在 isOverflown 函数中的 if 语句仅在 10 个网站加载中执行了 1 个。在 9 次尝试中，它甚至没有到达 if 的内部。虽然没有任何变化，只是重新加载了网站。

如何逐渐减小字体大小？如FONTSIZE -= 0.1；

---

function isOverflown() {
  alert("test");
  var element=document.querySelectorAll('.eventBoxTitle');
  for(var i=0;
  i < element.length;
  i++) if (element[i].offsetWidth < element[i].scrollWidth) {
    element[i].style.fontSize="small";
  }
}

document.addEventListener("DOMContentLoaded", function () { //if finished loading 
    isOverflown(); 
    });

<div id="title" class="eventBoxTitle">
  <h2>Become a star!</h2>
</div>

1. 该功能实际上是在每次网站启动时执行的。尽管“if”语句仅在 10 次尝试中执行一次，即使网站布局/规范保持完全相同。

其次我的问题是如何逐渐/动态地改变字体大小？我没有指定字体大小，因为它是纯 H2 标题。虽然我的计划是进行字体调整，直到它适合框，例如 fontSize -= 0.1; 所以它逐渐减小字体大小。如何实现这样的目标？

ps "alert(test)" 包含在内，因此您实际上可以看到它进入了该函数。

标签： javascript