如何使用 JavaScript 更改文本的字体大小?
在本教程中，程序员将学习使用 JavaScript 更改文本的字体大小。许多应用程序允许用户根据用户的要求更改字体大小。我们需要使用 JavaScript 更改默认字体大小来实现这一点。
在继续本教程之前，让我们先了解一下可以为字体大小分配哪些值。
用户可以为字体大小分配不同的值
我们可以为任何元素的字体大小分配以下值。每个值都会以不同的方式更改字体大小，我们在此处进行了解释。
xx-large | x-large | large | medium | small | x-small | xx-small − 用户可以使用这些值根据值设置固定字体大小。
smaller − 它将字体大小减小一个单位。如果用户使用像素作为字体大小，则意味着"smaller"将字体大小减小 1 像素。
larger − 它与"smaller"相反，将字体大小增加一个单位。
initial − 它将字体大小设置为默认值，即中等大小。
% − 它将字体大小设置为父元素字体大小的百分比。例如，父元素的字体大小为 100px，我们为子元素设置 10%，则子元素的字体大小为 10px。
继承 - 将子元素的字体大小设置为与父元素的字体大小相同。
因此，我们已经看到了用户可以分配给字体大小的不同值，用户可以根据需要使用其中任何一个值。
使用 JavaScript 更改字体大小
在本节中，我们将学习通过访问 HTML 元素来更改字体大小。每个 HTML 元素都包含样式属性，其中包含元素的各种样式。我们将使用 style 属性访问元素的字体大小并为其重新分配一个新值。
用户可以遵循以下语法。
语法
let element = document.getElementById( "element_id" ); element.style.fontsize = "xx-large";
示例
在下面的示例中，我们将使用 id 访问 div 元素并使用 JavaScript 更改字体大小。
<html> <head> <style> button { height: 30px; width: 130px; } </style> </head> <body> <h2>Change the font size using JavaScript.</h2> <div>Click the button to change the font size using <i> font-size property of style attribute.</i></div> <div id = "fonts"> hello world!</div> <button onclick = "changeFontsize()" >change font size</button> <script> // function to change the font size of div function changeFontsize() { let fontsDiv = document.getElementById("fonts"); fontsDiv.style.fontSize = 'xx-large'; // change font size to xx-large } </script> </body> </html>
在上面的输出中，用户可以看到，当我们点击按钮时，字体大小会变为 xx-large。
将字体大小更改为父元素的字体大小
在本节中，我们将使用"inherit"值根据父元素的字体大小更改字体大小。
语法
let element = document.getElementById( "element_id" ); element.style.fontsize = "inherit";
示例
在下面的示例中，父 div 内有一个子 div。最初，父 div 的文本字体大小为 50px，子 div 为 20px。当用户点击按钮时，它会将子 div 的字体大小设置为'继承'，这意味着子 div 的字体大小将与父 div 的字体大小相同，即 50px。
<html> <head> <style> button { height: 30px; width: 130px; } </style> </head> <body> <h2>Change the font size using JavaScript.</h2> <div style = "font-size: 50px;" > Click the button to change the font size <i> according to parent elements font size. </i> <div id = "fonts" style = "font-size:20px;" >hello world!</div> <button onclick = "changeFontsize()" >change font size</button> </div> <script> function changeFontsize() { let fontsDiv = document.getElementById("fonts"); fontsDiv.style.fontSize = 'inherit'; // 根据父元素的字体大小改变字体大小 } </script> </body> </html>
用户可以观察到，当他们点击按钮时，"hello world!"文本的字体大小会变得与其父 div 的字体大小相同。
在本教程中，我们演示了用户如何使用 JavaScript 添加功能来更改字体大小。我们已经看到了两个不同的例子。在一个例子中，我们设置了固定字体大小"xx-large"，在另一个例子中，我们设置了"inherit"值，这意味着它将从父元素继承字体大小。
此外，我们可以将字体大小设置为较小和较大值，以将其减小和增加一个单位。
