[英]Change font-size When Selection is made
当有人选择不同的字体大小时,我需要更改div中的字体大小。
这是我知道的代码,因为我添加了警报。 唯一不起作用的是改变字体大小。
CSS:
.heading {
font-size:18px;
}
JAVASCRIPT:
$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected);
});
HTML:
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="position: relative; zindex: 99; width: 220px; padding: 5px; color: #ffffff; text-align: center;"></div>
我只是无法弄清楚出了什么问题。
您需要将px
添加到每个选项值或valueSelected
+ 'px'
你错过了价值的“px”。 因此,您可以将其添加到下拉列表的值中,或者将其附加到脚本中,如下所示:
$('#htsize').on('change', function(e) { var optionSelected = $("option:selected", this); var valueSelected = this.value + "px"; $(".heading").css("font-size", valueSelected); });
.heading { font-size: 18px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;"> <option value=""> SELECT ONE </option> <option value="12">12px</option> <option value="13">13px</option> <option value="14">14px</option> <option value="15">15px</option> <option value="16">16px</option> <option value="17">17px</option> <option value="18">18px</option> <option value="19">19px</option> <option value="20">20px</option> <option value="21">21px</option> <option value="22">22px</option> <option value="23">23px</option> <option value="24">24px</option> <option value="25">25px</option> <option value="26">26px</option> <option value="27">27px</option> <option value="28">28px</option> <option value="29">29px</option> <option value="30">30px</option> </select> <div id="headline2" class="heading" style="">My Headline</div>
添加px如下代码:
$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected + 'px');
});
$(“。heading”)。css(“font-size”,valueSelected + 'px'
);
你需要在css字体大小值上添加“px”! 在这里工作 -
<h1>Hello, World!</h1>
<select>
<option value="12">Default</option>
<option value="14">14 PX</option>
<option value="16">16 PX</option>
<option value="18">18 PX</option>
<option value="20">20 PX</option>
</select>
$("select").on("change", function (e) {
var optionSelectedValue;
$( "select option:selected" ).each(function() {
optionSelectedValue = $( this ).val();
});
$("h1").css("font-size", optionSelectedValue + "px");
});
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="">My Headline</div>
jQuery的
$('#htsize').change(function(event){
var optval= $(this).val();
var optpx= optval + 'px';
$("#headline2").css("font-size", optpx);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.