CODEWITHSUNDEEP
jqueryhtml
yan
yan

Reputation: 369

Change font size of a label using Jquery

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>

I want to change the font size of my label according to the selection of my dropdown list. I tried some methods but none of them seem to be working. Any idea whats wrong with my code?

Upvotes: 2

Views: 1705

Answers (7)

Ahs N
Ahs N

Reputation: 8366

You need to add the px to text being set as the CSS like so:

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

Here is the JSFiddle demo

Upvotes: 1

Sarath Kumar
Sarath Kumar

Reputation: 2353

you can't access the value without setting it in options, try replacing this..

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

Here is the working FIDDLE.

Upvotes: 1

Mauro Sala
Mauro Sala

Reputation: 1186

change code with this

<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

Upvotes: 2

Hemal
Hemal

Reputation: 3760

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

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


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

     });
 });

FIDDLE

You have to add 'px' at the end of your font size.

Upvotes: 1

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Add "PX" at last of value please see below 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>

Upvotes: 1

Akshey Bhat
Akshey Bhat

Reputation: 8545

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

modify all select list elements as above

Upvotes: 0

T J
T J

Reputation: 43156

You should specify a unit as shown below:

$("#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>

Upvotes: 4

Related Questions