使用 javascript/jquery 的字體大小和顏色

Question

我在這個問題上被困了一天。 我正在嘗試更改變量的字體顏色。 讓我給你一個關於我下面的代碼的想法：

var add = 10 + 10;
var minus = 10 + 10;

var total = add + minus;

$('#output').html(total + ' is the answer')

我嘗試使用以下方法無濟於事：

total.style.color = "red";

我想更改“總計”的字體顏色，而不包括“就是答案”，我希望有人可以幫助我。 謝謝你們。

Answer 1

您正在將style應用於變量，但您需要將其應用於 DOM 元素。

 var add = 10 + 10; var minus = 10 + 10; var total = add + minus; $('#output').html(total).css('color', 'red')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span id="output">...</span>

Answer 2

var add = 10 + 10;
var minus = 10 + 10;

var total = add + minus;

$('#output').html(`<span>${total}</span>` + ' is the answer');
$('#output span').css('color','red');

https://jsfiddle.net/shoesheill/dpenm8fy/2/

Answer 3

您正在嘗試更改“總計”變量的字體顏色。

在 vanilla JS 中，如果要更改字體顏色，則必須先獲取元素對象，然后再更改它。 例如，如果我有這個 html：

<div id = "something"> some text <div/>

在 JS 中，我必須獲取具有 id = "something" 的 div 對象，然后更改其屬性，因此，

var something = document.getElementById("something");

something.style.color = "red";

因此，對於您的情況，我看到您的 id 名稱為“#output”，並且您正在使用 jQuery 設置 HTML 內容，如果要在 Vanilla JS 中選擇它，您必須從 id = 的 DOM 中獲取標簽輸出”並更改其屬性：

var output = document.getElementById("output");
output.style.color = "green";

對於 jQuery

$('#output').html(50 + ' is the answer').css('color', 'green')

Answer 4

var add = 10 + 10;
var minus = 10 + 10;
var total = add + minus;
$("#output").html(total);
$("#output").css({'color': 'red'});

Answer 5

var add = 10 + 10;
var minus = 10 + 10;
$('#output').html(add+minus).css('color', 'green');