Learn free online HTML5, javascript, and jquery Tutorials by Examples

Sunday 1 June 2014

changing font family and font size in jQuery

-------------------------------------------------
<script src="http://http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 <script>
    $("#change-text").change(function() {

    $('.changeMe').css("font-family", $(this).val());

});

$("#font-size").change(function() {
    $('.changeMe').css("font-size", $(this).val() + "px");
});
</script>

<form id="myform">
    <button>Clear</button>
    <select id="change-text">
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact ">Impact </option>
        <option value="Lucida Bright ">Lucida Bright </option>
        <option value="Lithos Pro ">Lithos Pro </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
  
    <select id="font-size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>
-------------------------------------------------

No comments:

Post a Comment