我正在尝试获取以下 javascript,以根据在下拉框中选择的内容更改文本区域的内容。 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>
最佳答案
可以通过调整 html
, js
缩短为单一功能;将元素的 id
设置为要在 css
处设置的属性;在 fontFamily
元素中将 normal
替换为 regular
;使用 RegExp.prototype.test()
检查元素值中的数字以返回长度值,包括 "px"
或 select
值的字符串设置 css
值时。
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/
关于javascript - 使用 javascript 更改字体系列字体大小和字体粗细不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33770540/