当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。