如何在 JavaScript 中使用下拉列表更改字体样式？

要更改或设置某些文本的字体样式，需要更改 fontFamily CSS 属性。 fontFamily 属性设置或返回元素中文本的字体系列名称列表。

句法：

object.style.fontFamily = "font"

要通过选项下拉更改字体样式：可以使用选项值在选项标签中传递字体值。

句法：

value 属性指定提交表单时要发送的值。因此，在选择要发送的值后，我们将元素中文本的 fontFamily 属性设置为上述语法中指定的选定值。在 javascript函数，这里是changeFontStyle() ，fontFamily 属性值设置为所选选项的字体值。默认情况下，它设置为 Times New Roman。

例子：

  

    
        Change Font Style by Option
        Dropdown Javascript
    

  

  
    
        
            GeeksForGeeks
        
    
  
    
  
        
            Times New Roman
        
        Arial
        Fantasy
        cursive
    
  
    
        var changeFontStyle = function (font) {
            document.getElementById(
                "output-text").style.fontFamily
                        = font.value;
        }
    

  

输出：

• 在选择任何选项之前(初始值 – Times New Roman)：
  
• 在下拉列表中选择一个选项后：
  
• 在下拉列表中选择另一个选项后：