[英]Changing font-family font-size and font-weight with javascript not working?
I am trying to get the following javascript to change the content of the textareas depending on what is selected in the dropdown boxes. 我正在尝试获取以下JavaScript,以根据下拉框中选择的内容来更改textareas的内容。 http://jsfiddle.net/73udajhm/
http://jsfiddle.net/73udajhm/
The Javascript: 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());
});
});
The HTML: 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>
Just check your coding. 只需检查您的编码即可。
The family doesn't work because you set name
instead of id
on the font type selector. 该系列无效,因为您在字体类型选择器上设置了
name
而不是id
。
And regular
should be normal
for font-weight
和
regular
应该是normal
的font-weight
Could be shortened to single function by adjusting html
, js
; 通过调整
html
, js
可以简化为单个函数; setting id
of element to property to be set at css
; 将element的
id
设置为要在css
设置的属性; substituting normal
for regular
at fontFamily
element ; 代
normal
用于regular
在fontFamily
元件; using RegExp.prototype.test()
to check for digit in value of element to return length value including "px"
or string of select
value when setting css
value. 使用
RegExp.prototype.test()
检查元素值中的数字,以在设置css
值时返回包括"px"
或select
值字符串的长度值。
html 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 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/ jsfiddle http://jsfiddle.net/73udajhm/6/
I think this is the cleanest version: 我认为这是最干净的版本:
$(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>
Cheers! 干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.