Question

当有人选择不同的字体大小时，我需要更改div中的字体大小。

这是我知道的代码，因为我添加了警报。唯一不起作用的是改变字体大小。

CSS：

  Name |    ID | payment_date | Pack
  -----+-------+--------------+-----
    A  |    17 | 25-Jan       | P
    B  |    11 | 30-Jan       | R
    C  |    13 | 26-Jan       | Q
    D  |    23 | 29-Jan       | Q

JAVASCRIPT：

.heading {
font-size:18px;
 }

HTML：

$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected);
});

我无法弄清楚出了什么问题。

Answer 1

您需要将px添加到每个选项值或valueSelected + 'px'

Answer 2

你错过了＆＃34; px＆＃34;从你的价值。因此，您可以将其添加到下拉列表的值中，或者将其附加到脚本中，如下所示：

＆＃13;

$('#htsize').on('change', function(e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value + "px";
  $(".heading").css("font-size", valueSelected);
});

＆＃13;

.heading {
  font-size: 18px;
}

＆＃13;

<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>

＆＃13;

Answer 3

将px添加为以下代码：

{{1}}

Answer 4

$（＆＃34; .heading＆＃34;）。css（＆＃34; font-size＆＃34;，valueSelected + 'px'）;

https://jsfiddle.net/ffpxgqy2/

Answer 5

您需要在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");
});

Answer 6

试试这个

<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);
    });

更改字体大小进行选择时

6 个答案:

试试这个