HTML Style fontSize用法及代码示例

fontSize属性用于设置或获取单词中出现的字符的字体大小。

用法:

它返回fontSize属性。
```
object.style.fontSize
```

它设置fontSize属性。

object.style.fontSize = "value|initial|inherit"

属性值：

值	描述
xx-small x-small small medium large x-large xx-large	预定义字体大小
smaller	将font-size的一个相对单位减少
larger	以font-size的一个相对单位增加
length	Font-size长度单位
％	父元素字体大小的百分比
initial	设定默认值
inherit	从其父值继承属性

返回值：它返回元素文本的字体大小。

示例1：将字体大小更改为较小。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontSize Property </title> 
</head> 
  
<body> 
    <center> 
        <p style="color:green; 
                  width:100%; 
                  font-size:30px;  
                  font-weight:bold;"  
           id="Geek1"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontSize Property </h2> 
        <br> 
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
                  
                
                //  Change font size in to small. 
                document.getElementById( 
               "Geek1").style.fontSize = "small"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

输出：

在点击按钮之前：
单击按钮后：

示例2：将font-size更改为xx-large。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontSize Property </title> 
</head> 
  
<body> 
    <center> 
        <p style="color:green;  
                  width:100%;  
                  font-size:10px;  
                  font-weight:bold;"  
           id="Geek1"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontSize Property </h2> 
        <br> 
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
                
                //  change into xx-large. 
                document.getElementById( 
                  "Geek1").style.fontSize = "xx-large"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

输出：

在点击按钮之前：
单击按钮后：

示例3：使用长度单位更改font-size。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontSize Property </title> 
</head> 
  
<body> 
    <center> 
        <p style="color:green; 
                  width:100%; 
                  font-size:10px;  
                  font-weight:bold;" 
           id="Geek1"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontSize Property </h2> 
        <br> 
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
                
                //  Change font size from  
                //  from 10px to 30px 
                document.getElementById( 
                  "Geek1").style.fontSize = "30px"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

输出：

在点击按钮之前：
单击按钮后：

示例4：使用“％”更改font-size

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontSize Property </title> 
</head> 
  
<body> 
    <center> 
        <p style="color:green; 
                  width:100%;  
                  font-size:10px;  
                  font-weight:bold;" 
           id="Geek1"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontSize Property </h2> 
        <br> 
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
                
                //  Change font-size from 100% to 200% 
                document.getElementById( 
                  "Geek1").style.fontSize = "200%"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

输出：

在点击按钮之前
点击按钮后

支持的浏览器：HTML |下面列出了DOM样式的fontSize属性：

谷歌浏览器
IE浏览器
火狐浏览器
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 HTML | DOM Style fontSize Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。