动态增加字体大小答案

【问题标题】：Dynamically increasing font size动态增加字体大小
【发布时间】：2018-12-29 06:14:34
【问题描述】：

我想增加段落的字体大小以及按钮中数字的字体大小。

我从 StackOverflow 复制并粘贴了我的 sizer 函数（进行了一些更改），并认为它可以工作，但仍然无法正常工作。有人可以帮忙吗？

由于我在第一部分上花了这么多时间，作为一个初学者程序员，我想知道我错过了什么。是否有人从我的代码或他们的经验中对我可能遗漏的内容有任何想法？

一如既往的感谢。

<html>
    <button onclick='incrementer(); sizer()' id='count' value=0 />0</button>
    <p id='test'>a</p>
    <script>
      clicks = 0
        incrementer = function () {
          clicks += 1
          click = document.querySelector("#count").textContent = clicks;
          click.innerHTML = document.getElementById("count").value = document.getElementById('test');
    }
        sizer = function changeFontSize() {
    div = document.getElementById("test");
    currentFont = div.style.fontSize.replace("pt", "");

    div.style.fontSize = parseInt(currentFont) + parseInt(clicks) + "pt";
}
</script>
</html>

【问题讨论】：

您是否尝试过验证这两个函数都被实际调用了？例如通过console.log();?

标签： javascript

【解决方案1】：

这里有一些东西：

我不会在您的onclick 中添加两个函数。只需附加一个并从通过onclick 触发的第一个函数中调用您的第二个函数。这样看起来整洁了很多
别忘了在每个变量前加上 var，否则 JavaScript 无效
我不太明白您对currentFont 变量的尝试，所以我删除了它。这不是必需的，会导致脚本无法正常工作

<html>
<button onclick='incrementer()' id='count' value=0 />0</button>
<p id='test'>a</p>
<script>
  var clicks = 0;
  var incrementer = function() {
    clicks += 1;
    var click = document.querySelector("#count").textContent = clicks;
    click.innerHTML = document.getElementById("count").value = document.getElementById('test');
    sizer();
  }
  var sizer = function changeFontSize() {
    var div = document.getElementById("test");

    div.style.fontSize = parseInt(clicks) + "pt";
  }
</script>

</html>

【讨论】：

currentFont 允许他从基线字体大小开始，而不是像您的示例中那样从 1pt 开始。
避免在任何地方使用 var 并使用分号
@Luca 哦，好吧，我实际上偶然发现了一些分号。感谢您指出。

【解决方案2】：

这是一个从头开始的版本，可以满足您的要求。我会指出一些我为帮助你而做的事情。

https://codepen.io/anon/pen/VBPpZL?editors=1010

<html>
  <body>
    <button id="count">0</button>
    <p id="test">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>    
  </body>
</html>

JS：

window.addEventListener('load', () => {
  const button = document.querySelector('#count');
  const paragraph = document.querySelector('#test');
  const startingFontSize = window.getComputedStyle(document.body, null)
    .getPropertyValue('font-size')
    .slice(0, 2) * 1;
  let clicks = 0;

  button.addEventListener('click', () => {
    clicks++;

    // this is a template literal 
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
    const fontSize = `${startingFontSize + clicks}px`;

    button.innerHTML = clicks;  
    button.style.fontSize = fontSize;
    paragraph.style.fontSize = fontSize;
  });
});

代码在页面加载时运行，因此我们在window 对象上附加一个事件侦听器以侦听load 事件。

然后我们存储对按钮和段落元素的引用。这些是const 变量，因为它们的值不会改变。这也将它们的范围限制为包含函数。

我们得到了 body 元素的初始字体大小，因为在这个例子中，我们没有在 css 中明确设置基本字体，所以我们只是为文档使用了那个字体。 getComputedStyle 是一个有点昂贵的操作，在这种情况下，我们只需要在开始时获取它，因为它不会改变，所以我们也将它存储为 const。该值作为“16px”之类的字符串返回，但我们需要数字，因此需要 slice 并乘以 1 以将字符串转换为数字。 parseInt 也会做同样的事情。

注意clicks 是用let 定义的。这意味着可以更改变量。 var 当然仍然有效，但在现代实践中，最好在声明变量时使用 const 和 let。这部分是因为它迫使您考虑您正在使用什么样的数据。

我们向button 元素添加一个事件监听器并监听点击事件。首先，我们增加clicks 变量。然后我们使用模板文字声明fontSize，将我们的新clicks计数添加到startingFontSize和“px”以获取字符串。

最后，button 元素的 innerHTML 值被更新。然后我们更新两个元素的 fontStyle 属性。

【讨论】：

【解决方案3】：

这里的问题是<p> 标签的 fontSize 没有初始值，因此 div.style.fontSize 返回一个空字符串。您可以使用 window.getComputedStyle 代替 div.style.fontSize，您将获得当前的 fontSize。已经有帖子解释了这种方法

https://stackoverflow.com/a/15195345/7190518

【讨论】：

【解决方案4】：

<p> 标签上没有初始的font-size 样式，因此 div.style.fontSize 始终为空。此外，最佳做法是在 javascript 中引入新变量时始终使用var。

帮助调试此类事情的一个好技巧是在各个点使用console.log()，然后查看浏览器控制台中出现的内容。我用了console.log(div.style.fontSize)，答案就很清楚了。

添加<p style='font-size:12px'>a</p>后在下面工作：

<html>
    <button style='font-size:12px;' onclick='incrementer(); sizer()' id='count' value=0 />0</button>
    <p id='test' style='font-size:12px;'>a</p>
    <script>
      var clicks = 0
      incrementer = function () {
          clicks += 1
          click = document.querySelector("#count").textContent = clicks;
          click.innerHTML = document.getElementById("count").value = document.getElementById('test');
      }
      var sizer = function changeFontSize() {
          var div = document.getElementById("test");
          var btn = document.getElementById("count");
          var newSize = parseInt(div.style.fontSize.replace("pt", "")) + parseInt(clicks);
          div.style.fontSize = newSize + "pt";
          btn.style.fontSize = newSize + "pt";
      }
    </script>
</html>

【讨论】：

【解决方案5】：

我不明白这个解决方案的逻辑，但您可以简化它，避免使用大量 var（无论如何，如果您不需要更改，总是更喜欢 let 或 const），使用单个函数并减少编写代码。

function increment(e){
  const ctrl = document.getElementById('test');
  let current = parseInt(e.dataset.size);
  current += 1;
  e.innerHTML = current;
  e.dataset.size = current;
  ctrl.style.fontSize = current + 'pt';
}

<button onclick="increment(this);" data-size="20">20</button>
    <p id='test' style="font-size:20pt;">A</p>

【讨论】：