Question

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

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

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

Answer 2

您的font-size标记上没有初始的<p>样式，因此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>

Answer 3

这里的问题是<p>标签的fontSize没有初始值，因此div.style.fontSize返回一个空字符串。您可以使用window.getComputedStyle而不是div.style.fontSize来获得当前的fontSize。已经有一篇文章介绍了这种方法

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

Answer 4

我不了解此解决方案的逻辑，但是您可以简化它，避免使用大量的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>

Answer 5

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

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元素，并监听click事件。首先，我们增加clicks变量。然后，我们使用模板文字声明fontSize，该文字将我们新的clicks计数添加到startingFontSize和“ px”以获得字符串。

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

动态增加字体大小

5 个答案: