HTML Style fontWeight用法及代碼示例

fontWeight屬性用於設置或返回單詞中粗字符或細字符的顯示方式。

用法:

它返回fontWeight屬性。
```
object.style.fontWeight
```

它設置fontWeight屬性。

object.style.fontWeight = "normal|lighter|bold|bolder|value|
initial|inherit"

屬性值：

值	描述
normal	字體的默認值
lighter	比normal細
bold	比normal粗
bolder	比bold更粗
value	定義從100到900，其中400是正常值
initial	設為默認值
inherit	從父元素繼承屬性

返回值：返回字符串字體的粗體。

示例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontWeight Property </title> 
</head> 
  
<body> 
    <center> 
        
        <!-- Property for p tag. -->
        <p style="color:green; 
                  width:100%; 
                  font-size:30px; 
                  font-weight:bold;" 
           id="sudo"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontWeight Property </h2> 
        <br> 
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
                
                //  Set property for "p" tag form 
                //  'bold' to 'lighter'. 
                document.getElementById( 
                  "sudo").style.fontWeight = "lighter"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

在點擊按鈕之前：
單擊按鈕後：

示例2：

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

輸出：

在點擊按鈕之前：
單擊按鈕後：

示例3：

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

輸出：

在點擊按鈕之前：
單擊按鈕後：

示例4：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontWeight Property </title> 
</head> 
  
<body> 
    <center> 
        <p style="color:green; 
                  width:100%;  
                  font-size:30px;" 
           id="sudo"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontWeight Property </h2> 
        <br> 
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
                
                //  Set font using values. 
                document.getElementById( 
                  "sudo").style.fontWeight = "1000"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

在點擊按鈕之前：
單擊按鈕後：

支持的瀏覽器：HTML | DOM樣式fontWeight屬性在下麵列出：

穀歌瀏覽器
IE瀏覽器
火狐瀏覽器
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自PranchalKatiyar大神的英文原創作品 HTML | DOM Style fontWeight Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。