JavaScript 如何设置字体的样式

JavaScript提供了document.getElementBy()方法，可以帮助我们检查元素的字体样式。这是了解特定元素应用的任何CSS属性值的最简单方法。默认的字体样式值是“normal”。我们可以通过使用getElementBy方法选择特定元素并检查样式和属性来轻松获取字体样式属性的值。例如，我们有一个段落元素，其<p>文本的字体样式是斜体。我们可以使用document.getElementByTagName('p')方法获取<p>元素。通过应用style.fontStyle方法，我们可以获得<p>元素的字体样式。

语法： 获取<p>元素的字体样式的语法如下：

document.getElementByTagName('p').style.font-style

上述方法将返回一个描述<p>元素字体样式的字符串。

示例1： 在下面的示例中，我们有一个包含文章标题的<h3>元素。在下面，我们创建了一个<div>元素，它将显示<h3>元素的字体样式，并借助按钮来实现。当点击按钮时，它将使用以下javascript方法获取<h3>的font-style CSS属性的值：

var fontStyle = document.getElementsByTagName('h3')[0].style.fontStyle;

之后，我们使用if/else条件来检查字体样式是斜体italic，正常normal还是斜体oblique，根据结果更新<div>元素的内容。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks 
    </h2> 
  
    <h3 style="font-style:italic;"> 
        How to check whether the style of  
        the font is normal, italic or  
        oblique with JavaScript? 
    </h3> 
  
    <div id="updatebox" style="width:400px;  
                height:auto;  
                border: 2px solid green;  
                padding:0.5rem 2rem"> 
        I will display the font-style 
        of the above &lth3> element. 
    </div><br> 
  
    <button onclick="checkFontStyle()"> 
        Click here to konw the font  
        style of &lth3> 
    </button> 
  
    <script> 
        let checkFontStyle = () => { 
  
            var fontStyle = document 
                .getElementsByTagName('h3')[0].style.fontStyle; 
  
            if (fontStyle == 'italic') { 
                document.getElementById('updatebox').innerHTML = 
                    "font-style of the above &lth3> element is italic."; 
  
            } else if (fontStyle == 'oblique') { 
                document.getElementById('updatebox').innerHTML = 
                    "font-style of the above &lth3> element is oblique."; 
  
            } else if (fontStyle == 'normal') { 
                document.getElementById('updatebox').innerHTML = 
                    "font-style of the above &lth3> element is normal."; 
            } 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何设置字体的样式

示例2: 在下面的示例中，我们创建了另一个按钮，用于更改文本的字体样式，之前创建的按钮将显示文本的当前字体样式。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
</head> 
  
<body> 
  
    <h2 style="color:green"> 
        GeeksforGeeks 
    </h2> 
  
    <h3 style="font-style:italic;"> 
        How to check whether the style of the font is normal, 
        italic or oblique with JavaScript? 
    </h3> 
  
    <div id="updatebox" 
         style="width:400px;  
                height:auto;  
                border: 2px solid green;  
                padding:0.5rem 2rem"> 
        I will display the font-style of 
        the above &lth3> element. 
    </div> 
  
    <br><button onclick="checkFontStyle()"> 
        Click here to konw the font style of &lth3> 
    </button> 
  
    <button onclick="changeFontStyle()"> 
        Click here to change the font style of &lth3> 
    </button> 
  
    <script> 
        let changeFontStyle = () => { 
            var fontStyle =  
                document.getElementsByTagName('h3')[0].style.fontStyle; 
          
            if (fontStyle == 'italic') { 
                document.getElementsByTagName('h3')[0] 
                  .style.fontStyle = 'normal'; 
          
            } else if (fontStyle == 'oblique') { 
          
                document.getElementsByTagName('h3')[0] 
                  .style.fontStyle = 'italic'; 
          
            } else if (fontStyle == 'normal') { 
          
                document.getElementsByTagName('h3')[0] 
                  .style.fontStyle = 'oblique'; 
            } 
        } 
          
        let checkFontStyle = () => { 
          
            var fontStyle = document.getElementsByTagName('h3')[0] 
                    .style.fontStyle; 
          
            if (fontStyle == 'italic') { 
                document.getElementById('updatebox') 
                     .innerHTML =  
    "font-style of the above &lth3> element is italic."; 
          
            } else if (fontStyle == 'oblique') { 
                document.getElementById('updatebox') 
                     .innerHTML =  
    "font-style of the above &lth3> element is oblique."; 
          
            } else if (fontStyle == 'normal') { 
                document.getElementById('updatebox') 
                     .innerHTML =  
    "font-style of the above &lth3> element is normal."; 
            } 
        } 
    </script> 
</body> 
  
</html>

输出:

JavaScript 如何设置字体的样式