Font color and size

Question

How do I change the font color and size of only one element in JavaScript
For example:
var number1=5
var number2=7
var result=number1*number2
document.write("the result of multiplying the two numbers is" + result)
Question: how do I change the color of only the result.
Thanks this is for a school assignment.

Answer 1

<p id="test"> Hello World! </p>

<script>
var a = document.getElementById('test');
a.style.fontSize = "50px"; //50 pixels
a.style.color = "#f00"; //yellow color
</script>

Answer 2

You can use the <span> tag!

document.write('the result of multiplying the two numbers is <span style="color: #00F; font: bolder 12pt arial;">' + result + '</span>');

love , I edited my answer.

Answer 3

love, go with the <span> tag again, define the color in style attribute, place number1 in b/w the <span> and you're done!

Answer 4

Thank you so much for the help. God bless you.

Answer 5

Thank you it works. How about if I wanted to change the color of the var number1 and number2
document.write(number1)

Answer 6

One last question:
Can I define the variable tag for the two numbers with the span at the beginning
Because in the assignment I have to repeat the numbers in document.write

Answer 7

Of course, you have to use some CSS:

span.result {
/* for result variable */
color: #00F;
}
span.variable {
/* for variable */
color: #0F0;
}

So when you write result to document, include
"<span class='result'>" + result + "</span>"
Similarly, for the variable!

Hope it helps!

Answer 8

Thanks. It does.

Answer 9

Blue, how about the font? How do I define it within the span tag?

Answer 10

Hi Jaydeep Khatri,

a.style.fontSize = "50" will do nothing to the paragraph, the reason is that we have many ways to define the font size i.e., px, pt, %, vh and vw.
So, to make the font size upto 50px you should use "50px" as the value of the fontSize property of style attribute.
Thank you!