使用jquery更改文本颜色和大小

Question

我正在设置一个包含简单数学计算的联系表单，我尝试更改文本的大小和颜色，即“$ + total”，但它只是不起作用。这是代码。

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

我要改变文字颜色和大小的部分。

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

Answer 1

您可以使用jQuery .css属性更改大小和颜色。像这样：

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

和

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

因此，您可以将其添加到文本代码中或将该文本代码放入变量中，然后将上面的css添加到变量中。

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'}）;