在javascript变量中，如何更改单行的字体颜色？

Question

I'm sure this is an easy question. I have some javascript that randomizes quotes, but I want the quote and the author of the quote to be different colors. I can of course use CSS to change the appearance of all the text, but I am not having much luck separating the quote and the author and I am not very proficient with javascript.

<script language="JavaScript">

var Quotation=new Array()

Quotation[0] = "Only two things are infinite, the universe and human stupidity, and I'm    not sure about the former.<br>Albert Einstein";
Quotation[1] = "Science is a way of thinking much more than it is a body of knowledge. <br>Carl Sagan";
Quotation[2] = "Few tragedies can be more extensive than the stunting of life, few injustices deeper than the denial of an opportunity to strive or even to hope, by a limit imposed from without, but falsely identified as lying within.<br>Stephen Jay Gould";
Quotation[3] = "I don't want to talk to you no more, you empty-headed animal food trough wiper! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries!<br>Taunting Frenchman";

var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script>

Answer 1

Just enclose parts of text you want separate colors for into <span></span> tags with different styles.

Eg

Quotation[0] = "<span style='color:green'>Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.</span><br><span style='color:red'>Albert Einstein</span>";

Answer 2

Let the quotes and the Authors be in HTML itself with different spans and common class for each and then apply styles to each class via jQuery.

Here's an example :

<span class="jQuote">Some blah blah stuff</span> <br />
<span class="jAuthor">Mr. Somebody</span>

In Javascript :

$(function(){
  $(".jQuote").css(/*Whatever styles you need to apply*/);
  $(".jAuthor").css(/*Whatever styles you need to apply*/);
});  

Find more on usage of css via jQuery.

But a better approach would be to apply different classes to quotes and authors and apply styles via CSS.

Answer 3

If quotes are sure to be in the format you have samples from, then split each quote by
tag and append spans around it as follows:

var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){
  var Quote = Quotation[whichQuotation];
  var quoteColor = 'green';
  var authorColor = 'red';
  var quoteSplits = Quote.split('<br>');
  var Quote = '<span style="color:' + quoteColor + '">' + quoteSplits[0] + '</span><br>';
      Quote += '<span style="color:' + authorColor + '">' + (quoteSplits.length > 1 ? quoteSplits[1] : '') + '</span>'; 
  document.write(Quote);
}
showQuotation();