HTML DOM Style fontSize 属性

HTML DOM Style fontSize 属性用于设置 HTML 元素字体大小。它可以使用像素（px）、百分比（%）或 em 单位来设置字体大小。这个属性可以通过 JavaScript 或 CSS 来修改。

在HTML文档中，我们经常需要通过改变字体大小来调整文本的呈现方式。HTML DOM（文档对象模型）中的Style fontSize属性是能够通过JavaScript来操作和控制字体大小的重要属性。

在HTML DOM中，每个元素都有一个style属性，用于设置或获取该元素的样式信息。而fontSize属性则用于设置或获取元素的字体大小。通常情况下，我们可以使用一些预定义的大小值（如：”xx-small”、”x-small”、”small”、”medium”、”large”、”x-large”、”xx-large”），也可以使用具体的数值来指定字体的大小。

设置fontSize属性的值

可以通过两种方式来设置fontSize属性的值：

使用预定义的大小值，直接将预定义的大小值赋值给fontSize属性。
使用具体的数值，可以指定像素（px）或百分比（%）来确定字体的大小。例如，可以使用”16px”来指定字体大小为16像素。

获取fontSize属性的值

要获取元素的fontSize属性的值，可以使用JavaScript中的style.fontSize属性。可以使用以下语法来获取fontSize属性的值：

var fontSizeValue = element.style.fontSize;

修改fontSize属性的值

要修改元素的fontSize属性的值，可以使用JavaScript中的style.fontSize属性。可以使用以下语法来修改fontSize属性的值：

element.style.fontSize = “20px”;

使用fontSize属性的例子

下面是一个示例，演示了如何使用fontSize属性来动态改变字体大小：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <script>
    function increaseFontSize() {
      var para = document.getElementById("myPara");
      var currentSize = parseInt(para.style.fontSize);
      para.style.fontSize = (currentSize + 2) + "px";
    }
    function decreaseFontSize() {
      var para = document.getElementById("myPara");
      var currentSize = parseInt(para.style.fontSize);
      para.style.fontSize = (currentSize - 2) + "px";
    }
  </script>
  <style>
    #myPara {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <button onclick="increaseFontSize()">Increase Font Size</button>
  <button onclick="decreaseFontSize()">Decrease Font Size</button>
  <p id="myPara">This is a paragraph.</p>
</body>
</html>

上面这个例子中，有两个按钮分别用于增加字体大小和减小字体大小。当点击按钮时，JavaScript代码会获取到文本段落的当前字体大小，然后对其进行加减操作，最后重新设置段落的字体大小。

总结

HTML DOM的style fontSize属性是一个重要的属性，可用于控制元素的字体大小。可以使用预定义的大小值或具体的数值来设置或获取fontSize属性的值，也可以通过JavaScript动态地修改字体大小。在实际的项目中，可以利用这个属性来实现一些动态的字体大小调整功能。