From within a javascript var, how do you change the font color for individual lines?

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>

CSS would be the best option. Use the [DOM](https://developer.mozilla.org/en-US/docs/DOM) to create and append elements, then style them in CSS. Also check here http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — elclanrs, Aug 21 '13 at 05:00
Indeed, CSS is your simplest and overall best option. If for some reason you must do it in JS, then the `replace()` method is what you're looking for. Just make sure there's a "unique" element that marks the beginning and the end of the author. Or simply change the CSS through JS, after giving a class to a tag containing your author, for instance. Look at this answer for a semantic way to do it: http://stackoverflow.com/a/10572932/1995518 PS: `
` is evil. Stop using it or it will eat your soul. — Ariane, Aug 21 '13 at 05:03

Yuriy Galanter · Accepted Answer · 2013-08-21T05:08:42.600

0

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

E.g.

Quotation[0] = "Only two things are infinite, the universe and human stupidity, and I'm not sure about the former. Albert Einstein";

edited Aug 21 '13 at 05:08

answered Aug 21 '13 at 05:03

Yuriy Galanter

35,167
11
60
119

score 0 · Answer 2 · answered Aug 21 '13 at 05:11

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.

score 0 · Answer 3 · answered Aug 21 '13 at 05:20

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();

From within a javascript var, how do you change the font color for individual lines?

3 Answers3