如何使用原生 JavaScript 限制字体大小放大缩小次数？

javascript

2024-03-21 00:29:31

用原生 JavaScript 限制字体大小放大缩小次数

在网页设计中，调整字体大小是常见的需求。然而，有时我们可能需要限制字体大小只能放大或缩小一定次数，以防止字体变得过于巨大或难以阅读。本文将探讨如何在使用原生 JavaScript 时实现此限制。

问题概览

假设我们有一个场景：我们希望通过单击按钮来增加或减小字体大小。但是，我们想限制用户只能单击两次按钮，以将字体大小限制在特定的最大值和最小值范围内。

解决方案

要实现此限制，我们需要采用以下步骤：

设置初始字体大小： 定义一个初始字体大小，例如 1em。
创建按钮事件处理程序： 为每个按钮创建一个事件处理程序，当用户单击该按钮时触发。
获取当前字体大小： 在事件处理程序中，使用 window.getComputedStyle() 获取当前字体大小。
计算新字体大小： 根据用户单击的按钮，计算新字体大小。例如，如果用户单击减小按钮，则计算新字体大小为当前字体大小的 0.75 倍。
检查限制： 在计算新字体大小后，检查它是否超出最大值或最小值限制。如果超出，则将新字体大小限制为最大值或最小值。
应用新字体大小： 将计算后的新字体大小应用到目标元素的样式中。

示例代码

以下是一个示例代码，演示如何限制字体大小只放大或缩小两次：

const container = document.getElementById("container");

const MIN_FONT_SIZE = 0.5;
const MAX_FONT_SIZE = 1.5;

let currentFontSize = 1;

const changeSizeByBtn = (size) => {
  if (size < 0 && currentFontSize <= MIN_FONT_SIZE) {
    return;
  } else if (size > 0 && currentFontSize >= MAX_FONT_SIZE) {
    return;
  }

  currentFontSize += size;
  container.style.fontSize = `${currentFontSize}em`;
};

HTML 代码

<div id="container">
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</div>

<button type="button" onclick="changeSizeByBtn(-0.25)">-A</button>
<button type="button" onclick="changeSizeByBtn(0)">A</button>
<button type="button" onclick="changeSizeByBtn(0.25)">A+</button>