Javascript 动态增加字体大小_Javascript

Javascript 动态增加字体大小

javascript

Javascript 动态增加字体大小,javascript,Javascript,我想增加段落的字体大小以及按钮中数字的字体大小我从StackOverflow复制并粘贴了我的sizer函数（做了一些修改），认为它可以工作，但仍然无法工作。有人能帮忙吗因为我花了这么多时间在第一部分，作为一个初学者程序员，我想知道我错过了什么。是否有人从我的代码或他们的经验中了解到我可能遗漏了什么一如既往地谢谢你 0 a 点击次数=0 递增器=函数（）{ 单击次数+=1 click=document.querySelector（#count”）.textContent=clicks；

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

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

因为我花了这么多时间在第一部分，作为一个初学者程序员，我想知道我错过了什么。是否有人从我的代码或他们的经验中了解到我可能遗漏了什么

一如既往地谢谢你


0
a
点击次数=0
递增器=函数（）{
单击次数+=1
click=document.querySelector（#count”）.textContent=clicks；
单击.innerHTML=document.getElementById（“计数”）.value=document.getElementById（“测试”）；
}
sizer=函数changeFontSize（）{
div=document.getElementById（“测试”）；
currentFont=div.style.fontSize.replace（“pt”和“”）；
div.style.fontSize=parseInt（当前字体）+parseInt（单击）+“pt”；
}

这里有些东西：

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


0
a
var=0；
var incrementer=函数（）{
点击次数+=1；
var click=document.querySelector（#count”）.textContent=clicks；
单击.innerHTML=document.getElementById（“计数”）.value=document.getElementById（“测试”）；
sizer（）；
}
var sizer=函数changeFontSize（）{
var div=document.getElementById（“测试”）；
div.style.fontSize=parseInt（单击）+“pt”；
}
您的
标记上没有初始的字体大小
样式，因此div.style.fontSize始终为空。此外，最佳实践是在javascript中引入新变量时始终使用var

帮助调试这些东西的一个好技巧是在不同的地方使用console.log（）
，并查看浏览器控制台中出现了什么。我使用了console.log（div.style.fontSize）
，答案变得很清楚
添加a
后在下面工作：


0
a
var=0
递增器=函数（）{
单击次数+=1
click=document.querySelector（#count”）.textContent=clicks；
单击.innerHTML=document.getElementById（“计数”）.value=document.getElementById（“测试”）；
}
var sizer=函数changeFontSize（）{
var div=document.getElementById（“测试”）；
var btn=document.getElementById（“计数”）；
var newSize=parseInt（div.style.fontSize.replace（“pt”）+parseInt（单击）；
div.style.fontSize=newSize+“pt”；
btn.style.fontSize=newSize+“pt”；
}
这里的问题是，标记的fontSize没有初始值，因此div.style.fontSize返回一个空字符串。
您可以使用window.getComputedStyle而不是div.style.fontSize，您将获得当前的fontSize。
已经有一篇文章解释了这种方法
我不理解这个解决方案的逻辑，但是您可以简化它，避免使用大量的var（无论如何，如果不需要更改，总是喜欢let或const），使用单个函数，编写更少的代码

函数增量（e）{
const ctrl=document.getElementById（'test'）；
让current=parseInt（e.dataset.size）；
电流+=1；
e、 innerHTML=当前；
e、 dataset.size=当前数据；
ctrl.style.fontSize=当前值+pt'；
}
20
A
这是一个全新版本，可以满足您的要求。我将指出我为帮助你所做的几件事

代码在加载页面时运行，因此我们在窗口
对象上附加一个事件侦听器，侦听加载
事件
然后存储对按钮和段落元素的引用。这些变量是常量，因为它们的值不会改变。这也将其范围限制为包含函数
我们得到body元素的初始字体大小，因为在本例中，我们没有在css中显式地设置基本字体，所以我们只使用文档的基本字体getComputedStyle
是一个有点昂贵的操作，在这种情况下，我们只需要在开始时获取它，因为它不会改变，所以我们还将它存储为常量。该值以类似“16px”的字符串形式返回，但我们需要数字，因此需要切片
并乘以1将字符串转换为数字parseInt
也会做同样的事情
请注意，clicks
是用let
定义的。这意味着变量可以更改var
当然仍然有效，但在现代实践中，在声明变量时最好使用const
和let
。这在一定程度上是因为它迫使您思考正在处理的数据类型
我们向按钮元素添加一个事件侦听器，并侦听click事件。首先，我们增加clicks
变量。然后，我们使用一个模板文本声明fontSize
，该模板文本将新的点击次数添加到开始的fontSize
和“px”中，以获得一个字符串
最后，更新按钮
元素的innerHTML值。然后更新这两个元素的fontStyle属性
<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>

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