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

您正在尝试更改“总计”变量的字体颜色。

在香草JS中，如果要更改字体颜色，则必须先获取element对象，然后再对其进行更改。例如，如果我有这个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 =“ output”并更改其属性：

var output = document.getElementById("output");
output.style.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');

字体大小和颜色（使用javascript / jquery

5 个答案: