JavaScript 如何使用下拉列表更改字体大小

要更改或设置特定文本的字体大小，需要更改fontSize属性。fontSize属性设置或返回元素中文本的fontSize名称列表。

CSS的font-size属性用于指定字体的高度和大小。它会影响元素文本的大小。它具有中等的默认值，并可应用于任何元素。

语法：

element.style.fontSize = "value"

使用下拉选项来更改字体大小，选项值可以用来传递字体大小值到选项标签中。

语法：

<option value="px">

示例1： 在以下示例中，下拉列表有五个选项用于设置字体大小：8px，10px，14px，20px和24px。当用户选择一个选项时，通过将其style.fontSize属性设置为所选值，事件监听器将更新 gfg div 的样式。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title> 
        How to change font size using 
        drop-down list in JavaScript ? 
    </title> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        option { 
            font-size: 1rem; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="gfg"> 
        <h1>Welcome To Geeksforgeeks!!</h1> 
        <p> 
            A Computer Science portal for geeks. 
            It contains well written,well thought 
            and well explained computer 
            science and programming articles. 
        </p> 
    </div> 
    <select id="gfg1"> 
        <option value="8px">8px</option> 
        <option value="10px">10px</option> 
        <option value="14px">14px</option> 
        <option value="20px">20px</option> 
        <option value="24px">24px</option> 
    </select> 
  
    <script> 
        const selectFontSize = document.getElementById("gfg1"); 
        const updateElement = document.getElementById("gfg"); 
  
        selectFontSize.addEventListener("change", function () { 
            const selectedValue = selectFontSize.value; 
            updateElement.style.fontSize = selectedValue; 
        }); 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何使用下拉列表更改字体大小

示例2: 在以下示例中，下拉列表包含三个选项：小号，中号和大号字体。当用户选择一个选项时，事件监听器将通过设置其style.fontSize属性为fontSizes对象中的相应值来更新gfg1段落的样式。

HTML

<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        Change font size using in JavaScript ? 
    </title> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        option { 
            font-size: 1rem; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="gfg1"> 
        <h1>Welcome To Geeksforgeeks!!</h1> 
        <p> 
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer 
            science and programming articles. 
        </p> 
    </div> 
    <label for="gfg">Select font size:</label> 
    <select id="gfg"> 
        <option value="small">Small</option> 
        <option value="medium">Medium</option> 
        <option value="large">Large</option> 
    </select> 
  
    <script> 
        const selectFontSize =  
            document.getElementById("gfg"); 
  
        const updateElement =  
            document.getElementById("gfg1"); 
  
        const fontSizes = { 
            small: "12px", 
            medium: "16px", 
            large: "20px", 
        }; 
  
        selectFontSize.addEventListener("change",  
        function () { 
            const valueSelect = selectFontSize.value; 
            updateElement.style.fontSize  
                = fontSizes[valueSelect]; 
        }); 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何使用下拉列表更改字体大小