Question

我需要使用JavaScript中的函数通过选择选项

来更改字体大小

<label for="sel1">size of font:
                    <select class="form-control" onchange="size (this);">size of font:
                         <option onclick="size(4)">4</option>
                         <option onclick="size(8)">8</option>
                         <option onclick="size(12)">12</option>
                         <option onclick="size(16)">16</option>
                         <option onclick="size(20)">20</option>
                         <option onclick="size(24)">24</option>
                         <option onclick="size(28)">28</option>
                         <option onclick="size(32)">32</option>
                         <option onclick="size(36)">36</option>
                         <option onclick="size(40)">40</option>
                         <option onclick="size(44)">44</option>
                         <option onclick="size(48)">48</option>
                         <option onclick="size(52)">52</option>
                         <option onclick="size(56)">56</option>
                         <option onclick="size(58)">58</option>
                    </select>
                </label>

这个功能我认为有错误

    function size(n){
            var s=document.getElementById("demo");
            s.style.fontSize = n + "px";
        }

Answer 1

function changeSize(n) {
    var s = document.getElementById('demo');
    s.style.fontSize = n.value + 'px'
}

<label for="sel1">size of font:</label>
<select class="form-control" id="sel1" onchange="changeSize(this);">
  <option>4</option>
  <option>8</option>
  <option>12</option>
  <option>16</option>
  <option>20</option>
  <option>24</option>
  <option>28</option>
  <option>32</option>
  <option>36</option>
  <option>40</option>
  <option>44</option>
  <option>48</option>
  <option>52</option>
  <option>56</option>
  <option>58</option>
</select>
<div id="demo">
DEMO
</div>

Answer 2

您不应在每个选项元素上注册onclick事件。将其设置为选择就足够了。

<select class="form-control" onchange="size(this);">size of font:
                         <option value="4">4</option>
                         <option value="8">8</option>

和你的职能：

function size(elm){
            var s=document.getElementById("demo");
            s.style.fontSize = elm.value + "px";
        }

最好分离选项的值和查看文本，例如，您可能希望将来向该选项添加额外信息，例如<option value="4">4px</option>

通过javascript中的select选项更改字体大小

2 个答案: