使用 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');