如何在Javascript中制作一个使尺寸变大的按钮？答案

【问题标题】：How do I make a button that make size bigger in Javascript?如何在Javascript中制作一个使尺寸变大的按钮？
【发布时间】：2020-05-06 11:52:59
【问题描述】：

我想制作一个按钮，将字体大小增加特定数量的像素或任何其他单位。我试过这个：
---.style.fontSize += "5px"
但它没有用。正确的方法是什么？

<html id="html">
<h1>Lorem ispum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
<button onclick="document.getElementById('html').style.fontSize += '5px'">Bigger Size</button>
</html>

请不要使用 Jquery。谢谢

【问题讨论】：

w3schools.com/js/js_htmldom_css.asp 哦等等你为什么有“+=”？
这能回答你的问题吗？ Increase the font size with a click of a button using only JavaScript

标签： javascript

【解决方案1】：

你需要：

使用getComputedStyle查找当前字体大小，
获取字体大小的数值，
用它进行算术运算，然后将其分配回元素的字体大小

例子：

const button = document.getElementById('resizeButton');
const element = document.getElementById('html');

const sizeExpression = /([\d.]+)(.*)/;
button.addEventListener('click', () => {
  const style = getComputedStyle(element);
  const [size, value, unit] = sizeExpression.exec(style.fontSize);
  element.style.fontSize = `${parseFloat(value) + 5}${unit}`
});

<html id="html">
<h1>Lorem ispum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
<button id="resizeButton">Bigger Size</button>
</html>

【讨论】：