时间戳

首页 > 解决方案 > 下拉菜单功能不选择字体大小

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>

控制台上没有显示错误

标签： javascripthtml

解决方案

  • 不要使用内联 JavaScript
  • 如果您只需要一个功能，请不要使用多个功能，即：change_size()
  • 你总是设置为"10px"使用this.value + 'px'
  • 使用.style.fontSize代替value
  • <select>向您的元素添加一个 ID，即：is="size"并在 JS 中定位它
  • 利用.addEventListener()
  • selected disabled使用默认提示选项的属性

function change_size() {
  document.querySelector("#h1").style.fontSize = `${this.value}px`;
}

document.querySelector('#size').addEventListener('change', change_size);
<select id="size">
  <option selected disabled>Size</option>
  <option>10</option>
  <option>20</option>
  <option>30</option>
  <option>40</option>
  <option>50</option>
</select>

<h1 id="h1">TEST</h1>

推荐阅读