Www.Free-Learn.Ir
اجرا کن »
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> body{ background-color:#f2f2f2; } .mybox{ max-width:800px; margin:10px auto; padding:10px; background-color:#fff; box-shadow: 2px 5px 30px rgba(0,0,0,.1); } </style> </head> <body> <form> Font Family: <select id="font"> <option value="tahoma">tahoma</option> <option value="Verdana">Verdana</option> <option value="Monospace">Monospace</option> </select> Font Size: <select id="size"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="7">7</option> <option value="10">10</option> </select> Font Color <input type="color" id="colortext"> </form> <div class="changeme mybox"> This Text For Test. </div> <script> $("#font").change(function() { $('.changeme').css("font-family", $(this).val()); }); $("#size").change(function() { $('.changeme').css("font-size", $(this).val() + "em"); }); $("#colortext").change(function() { $('.changeme').css("color", $(this).val()); }); </script> </body> </html>