Change Font Colors of specific Elements in Array - Javascript
Question
all.
I am trying to create an array where I can change the color of the fonts within them.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Array Font Colors</title>
</head>
<body>
<script type="application/javascript">
var colors= new Array("Black", "White", "Yellow");
for(var a=0; a<colors.length; a++){
document.write(colors[a]+ "<br>");
}
</script>
</body>
</html>
The above is what I have that makes the array, and displays it. I am not sure how to change the color of each element however to its given array value. For example, since the second array element value is White, make the font color white. I am new to JavaScript and am a bit confused on how this is done.
Thank you
4 answers
solution1
1 2018-02-27 05:56:01
You can try that in both ways by using document.body.innerHTML or document.write
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Array Font Colors</title> </head> <body> <script type="application/javascript"> var colors= new Array("Black", "White", "Yellow"); for(var a=0; a<colors.length; a++){ // document.body.innerHTML += "<div style='color:" + colors[a] + "'>" + colors[a] + "</div>"; //or document.write("<div style='color:" + colors[a] + "'>" + colors[a] + "</div>"); } </script> </body> </html>
solution2
1 2018-02-27 05:57:55
Apply css to document.write
<html> <head> <meta charset="utf-8"> <title>Array Font Colors</title> </head> <body> <script type="application/javascript"> var colors= new Array("Black", "White", "Yellow"); for(var a=0; a<colors.length; a++){ document.write("<p style='color:"+colors[a]+"'>"+colors[a]+ "</p>"); } </script> </body> </html>
solution3
0 2018-02-27 05:53:57
Instead of using document.write , append a span tag to the body .
Replace that document.write statement by
document.body.innerHTML += "<span style='color:" + colors[a] + "'>" + colors[a] + "</span>";
solution4
0 2018-02-27 06:01:23
not the best way but try thisdocument.write(colors[a].fontcolor("yourcolor")+ "<br>")
can be any css color // #db3f3f , "red" etc..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.