Question

Jquery的：

$("#size").on('change',function(){
  var getValue=$(this).val();
  //alert(getValue);
  $("#lbll").css("font-size",getValue);

 });

HTML：

<select name="fontsize" id="size">
        <option id="size6">6</option>
        <option id="size8">8</option>
        <option id="size9">9</option>
        <option id="size10">10</option>
        <option id="size11">11</option>
        <option id="size12">12</option>
        <option id="size14">14</option>
        <option id="size18">18</option>
        <option id="size24">24</option>
        <option id="size30">30</option>
        <option id="size36">36</option>
        <option id="size48">48</option>
        <option id="size60">60</option>
        <option id="size72">72</option>
    </select>

<label id="lbll">fooo</label>

我想根据下拉列表的选择更改标签的字体大小。我尝试了一些方法，但似乎都没有。我的代码有什么问题吗？

Answer 1

您应该指定一个单位，如下所示：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="fontsize" id="size">
  <option id="size6">6</option>
  <option id="size8">8</option>
  <option id="size9">9</option>
  <option id="size10">10</option>
  <option id="size11">11</option>
  <option id="size12">12</option>
  <option id="size14">14</option>
  <option id="size18">18</option>
  <option id="size24">24</option>
  <option id="size30">30</option>
  <option id="size36">36</option>
  <option id="size48">48</option>
  <option id="size60">60</option>
  <option id="size72">72</option>
</select>

<label id="lbll">fooo</label>

Answer 2

使用此

更改代码

<select name="fontsize" id="size">
    <option value="6px">6</option>
    <option value="8px">8</option>
    <option value="9px">9</option>
    <option value="10px">10</option>
    <option value="11px">11</option>
    <option value="12px">12</option>
    <option value="14px">14</option>
    <option value="18px">18</option>
    <option value="24px">24</option>
    <option value="30px">30</option>
    <option value="36px">36</option>
    <option value="48px">48</option>
    <option value="60px">60</option>
    <option value="72px">72</option>
</select>

<label id="lbll">fooo</label>

Here the working fiddle

Answer 3

添加“PX”的最后值请参见下面的JS -

$("#size").on('change',function(){
  var getValue=$(this).val();
  
  $("#lbll").css("font-size",getValue + "px");

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="fontsize" id="size">
        <option id="size6">6</option>
        <option id="size8">8</option>
        <option id="size9">9</option>
        <option id="size10">10</option>
        <option id="size11">11</option>
        <option id="size12">12</option>
        <option id="size14">14</option>
        <option id="size18">18</option>
        <option id="size24">24</option>
        <option id="size30">30</option>
        <option id="size36">36</option>
        <option id="size48">48</option>
        <option id="size60">60</option>
        <option id="size72">72</option>
    </select>

<label id="lbll">fooo</label>

Answer 4

$(document).ready(function(){
    $("#size").on('change',function(){

        var getValue=$(this).val();


        $("#lbll").css("font-size",getValue + 'px');

     });
 });

FIDDLE

您必须在字体大小的末尾添加“px”。

Answer 5

您无法在选项中进行设置而无法访问该值，请尝试将其替换为..

<select name="fontsize" id="size">
        <option value="6px">Size 6</option>
        <option value="8px">Size 8</option>
        <option value="9px">Size 9</option>
        <option value="10px">Size 10</option>
</select>
<label id="lbll">fooo</label>

以下是工作 FIDDLE 。

Answer 6

您需要将px添加到文本设置为CSS，如下所示：

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

Here is the JSFiddle demo

Answer 7

<option id="size6" value="6">6</option>

修改所有选择列表元素，如上所述

使用Jquery更改标签的字体大小

7 个答案: