New course! Every coder should learn Generative AI!
Try a free lesson+ 3
How to change colors in Javascript
Hi, right now i'm trying to do something cool with HTML + JavaScript, and I want to make the backround black and the Javascript text white. I know that for the back i just do <body bgcolor="black> but I don't know how to change the color in Javascript...
8 Answers
0
I wrote you 2 codes and you can choose the one you like more :)
In the first code use "write ("text");" to write something and each output will automatically be in a new line.
In the second code use "write ("text");" to write something and use "newLine ();" to start a new line.
If you need more explanation how my codes work, ask me :)
https://code.sololearn.com/Wb9As9LOxd4W/?ref=app
https://code.sololearn.com/W99xWACOf19Y/?ref=app
+ 3
object.style.background=color;
trying to use background-color might produce a "background-color"is not a property error!
![᠌᠌Brains[Abidemi] - avatar](https://blob.sololearn.com/avatars/261759cb-3bfd-4270-b5eb-35a4bfadb544.jpg)
+ 2
You don't get it... I changed the backround color with HTML ( to black) and I want to change the Javascript output to white (because black on black is not such a good idea)
do i use:
object.style.backround=black("the text i want to show in white")
?
Edit: wow best coder of the month global in here
+ 2
To change the text color use the CSS "color" property. To change the background color use the "background-color" property.
For example:
<body style="color: white; background-color: black;">
Or
<style>
body {
color: white;
background-color: black;
}
</style>
To output some text to the HTML "body" element using JavaScript use:
document.body.innerHTML = "Your text";
(the "body" element has to be loaded before the JavaScript is run, otherwise you'll see an error "Cannot set 'innerHTML' property of null")
~~~~~~~~~~~~~~~~~~~
Your code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body style="color: white; background-color: black;">
<script>
document.body.innerHTML = "Some text";
</script>
</body>
</html>
+ 1
document.body.style.backgroundColor = prompt('background color?', 'green');
+ 1
Note that doing that will remove the JavaScript element from the body element, meaning the script will stop running and will be lost. If you want JavaScript to do something after it outputs the text (for example, to get the user input, do a calculation and output the result) use this code instead:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
window.onload = function () {
document.body.innerHTML = "Some text";
}
</script>
</head>
<body style="color:white; background-color:black">
</body>
</html>
+ 1
Thanks, but I need to output more than 1 sentence...
I used
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
window.onload = function () {
document.body.innerHTML = "Some text";
document.body.innerHTML = n
}
</script>
</head>
<body style="color:white; background-color:black">
</body>
</html>
in HTML, and n is 10 from Javscript... used
var n = 10
And it outputs n (10) only, and it was supposed to output Some text AND 10...
Javaskript - never mess with the colors
0
window.onload = function () {
Your code goes here
}
Often have questions like this?
Learn more efficiently, for free:
