Changing text color and size with jquery

Question

I'm setting up a contact form that includes simple a math calculation, and I tried changing the size and color of the text which is the "$ + total" and it's just not working. Here is the code.

 <div id="form-total"></div> <script> jQuery(document).ready(function ($) { var calculate = function () { var total = 0.00; // Check the chosen option of a select menu var val1 = $('.iphorm_1_1').val(); if (val1 == 'Ebook') { total += 150; } else if (val1 == 'Print Book') { total += 175; } else if (val1 == 'Magazine') { total += 200; } else if (val1 == 'Other') { total += 150; } // A second select menu var val2 = $('.iphorm_1_2').val(); if (val2 == 'Non-Fiction') { total += 0; } else if (val2 == 'Fiction') { total += 0; } else if (val2 == 'Other') { total += 0; } var val3 = $('.iphorm_1_3').val(); if (val3 == '2') { total += 0; } else if (val3 == '3') { total += 50; } else if (val3 == '4') { total += 100; } else if (val3 == '5') { total += 150; } else if (val3 == '6') { total += 200; } else if (val3 == '7') { total += 250; } else if (val3 == '8') { total += 300; } else if (val3 == '9') { total += 350; } else if (val3 == '10') { total += 400; } // Display the result to the user $('#form-total').text('$' + total); // Set the value of the hidden field $('input[name=iphorm_1_7]').val('$' + total); }; // Calculate on page load calculate(); // Recalculate when these select menus are changed $('.iphorm_1_1, .iphorm_1_2, .iphorm_1_3').change(calculate); }); </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

And the part where i want to change the text color and size.

 $('#form-total').text('$' + total); 

Answer 1

You can change size and color with jQuery .css property. Like so:

element.css('font-size','15px');

and

element.css('color','#000000');

So you can add that to your text code or put that text code in a variable and then add the css above to the variable.

Answer 2

$('#form-total').text('$' + total).css({"color": "green", "font-size": "400px"});

Answer 3

$（'＃form-total'）。text（'$'+ total）.css（{font-size：'YOUR_SIZE'，color：'YOUR_COLOR'}）;