Javascript 下拉菜单功能不选择字体大小

我的下拉列表不会在单击时更改字体大小

<div> <h1 id="h1">This is text Aligned !!!</h1><div>

        <select> 
            <option>Size</option>
        <option value="10" id ="ten" onclick="btn1">10</option>
        <option value="20" id ="tw" onselect="btn2">20</option>
        <option value="30" id ="th" onclick="btn3" >30</option>
        <option value="40" id = "fo" onclick="btn4">40</option>
        <option value="50" id = "fi" onclick="btn5">50</option>
    </select>
    </div>

    <script>

    function btn1() {
        document.getElementById("h1").value = "10px";

    }

    </script>

控制台上未显示任何错误

不要使用内联JavaScript 如果您只需要一个功能，即：更改大小，则不要使用多个功能 您总是设置为10px，而不是使用此值+px 使用.style.fontSize而不是value 在元素中添加一个ID，即：is=size，并在JS中定位它 使用.addEventListener 使用为默认提示选项禁用的选定属性 函数更改大小{ document.querySelectorh1.style.fontSize=`${this.value}px`； } document.querySelector'size'。addEventListener'change'，change\u size； 大小 10 20 30 40 50

---

测试单击下拉列表时，您所做的是更改id为h1值的元素。您应该执行以下操作

document.getElementById("h1").style.fontSize = '10px';

试试这个 将btn1功能更改为该功能，将选项值从10更改为10px

function btn1() {  document.getElementById("h1").style.fontSize = `${this.value}px`; }