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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。