使用JavaScript更改字体家族的字体大小和字体粗细不起作用？

Question

我正在尝试获取以下JavaScript，以根据下拉框中选择的内容来更改textareas的内容。 http://jsfiddle.net/73udajhm/

Javascript：

$(function () {
    $("#fontsize").on('change', function () {
    $('.address').css('font-size', $(this).val() + 'px');
    });
});

$(function () {
    $("#fonttype").on('change', function () {
    $('.address').css('font-family', $(this).val());
    });
});

$(function () {
    $("#fontweight").on('change', function () {
    $('.address').css('font-weight', $(this).val());
    });
});

HTML：

Font Size:
<select id="fontsize">
<option>-</option>
<option value="24">24</option>
<option value="16">16</option>
</select>

<br />Font Type:
<select name="fonttype">
<option>-</option>
<option value="verdana">Verdana</option>
<option value="arial">Arial</option>
</select>

<br />Font Weight:
<select id="fontweight">
<option>-</option>
<option value="bold">Bold</option>
<option value="regular">Regular</option>
</select>

<div>
<textarea id="label" class='address'>Hello 123</textarea>
<textarea class='address'>Hello 123</textarea>
</div>

Answer 1

只需检查您的编码即可。

该系列无效，因为您在字体类型选择器上设置了name而不是id 。

和regular应该是normal的font-weight

Answer 2

通过调整html ， js可以简化为单个函数; 将element的id设置为要在css设置的属性； 代normal用于regular在fontFamily元件; 使用RegExp.prototype.test()检查元素值中的数字，以在设置css值时返回包括"px"或select值字符串的长度值。

HTML

Font Size:
<select name="fontSize" id="fontSize">
    <option>-</option>
    <option value="24">24</option>
    <option value="16">16</option>
</select>
<br />Font Type:
<select name="fontFamily" id="fontFamily">
    <option>-</option>
    <option value="verdana">Verdana</option>
    <option value="arial">Arial</option>
</select>
<br />Font Weight:
<select name="fontWeight" id="fontWeight">
    <option>-</option>
    <option value="bold">Bold</option>
    <option value="normal">Normal</option>
</select>
<div>
<textarea id="label" class='address'>Hello 123</textarea>
<textarea class='address'>Hello 123</textarea>
</div>

JS

$(function () {
    $("[id^=font]").on("change", function () {
       $(".address")
       .css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
    });
});

jsfiddle http://jsfiddle.net/73udajhm/6/

Answer 3

我认为这是最干净的版本：

 $(function() { $("select").on('change', function() { var $property = $(this).attr('name'); var $value = $(this).data("sufix") ? $(this).val() + $(this).data("sufix") : $(this).val(); $('.address').css($property, $value); }); }); 

 Font Size: <select name="font-size" data-sufix="px"> <option>-</option> <option value="24">24</option> <option value="16">16</option> </select> <br />Font Type: <select name="font-family"> <option>-</option> <option value="Verdana">Verdana</option> <option value="Arial">Arial</option> </select> <br />Font Weight: <select name="font-weight"> <option>-</option> <option value="bold">Bold</option> <option value="normal">Normal</option> </select> <div> <textarea id="label" class='address'>Hello 123</textarea> <textarea class='address'>Hello 123</textarea> </div> 

干杯!