JavaScript String fontcolor Method Explained

The HTML code to wrap text in a font tag can be generated using JavaScript.

MyHTML = MyText.fontcolor(color);

Important Note

The fontcolor() method is not standardized and may not behave consistently in all browsers.

The method produces HTML 4 code that utilizes a font tag that does not exist in HTML 5.

It should be avoided if possible, and CSS should be used instead. An example using CSS is provided here.

HTML 4 Font Attribute Value Types:

The old font attribute will accept three types of values:

The names of simple colors, such as red, blue, or green.

<font color="red">

A hexadecimal color code, proceeded by a pound sign.

<font color="#0000ff">

An RGB value, example: rgb(0,255,0)

<font color="rgb(0,255,0)">

JavaScript String fontcolor() Method Example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>JavaScript String fontcolor() Method Example</title>
</head>
<body>
<script>
	var MyText = "Sample Text With the fontcolor HTML Tag";
	var MyHTML = MyText.fontcolor("red");
	document.write(MyHTML);
</script>
</body>
</html>

The code above produces a blank HTML document with the following HTML:

<font color="red">Sample Text With the fontcolor HTML Tag</font>

Alternative to Using the fontcolor() Method using CSS

Even though the most commonly used browsers treat the fontcolor method consistently, it is still better to avoid potential issues by creating the needed HTML code inside a string and then inserting that HTML into the DOM.

Example JavaScript fontcolor() Method Alternative:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>JavaScript String fontcolor() Method Alternative</title>
</head>
<body>
	<h1>An Example of How To Generate Colored Text with JavaScript</h1>
<script>
	var MyText = "Example of an alternative way to generate colored text with HTML in JavaScript.";
	var MyStyle = "<style>.blue-text{color: #0000ff;}</style>";
	var MyHTML = "<span class=\"blue-text\">" + MyText + "</span>";
	document.head.innerHTML += MyStyle;
	document.body.innerHTML += MyHTML;
</script>
</body>
</html>

Which will create the following HTML:

<span class="blue-text">Example of an alternative way to generate colored text with HTML in JavaScript.</span>

The example will also insert the following CSS style into the document’s header:

<style>.blue-text{color: #0000ff;}</style>

The Pure HTML & CSS Alternative

In the case that JavaScript can be completely avoided, an inline style can be used instead.

<span style="color: rgb(0,255,0)">Example of Green Colored Text with HTML and CSS.</span>

Using the fontcolor() Method With An Invalid Argument

Passing an invalid argument to this method does not generate an error message and will usually result in text that is colored green in the browser.

MyText.fontcolor("The Text Will Be Green");
//Invalid Usage of the Font Attribute

"This Text Will Also Be Green".fontcolor();
//This will set the Attribute value to "undefined"

"This Text Will be Black".fontcolor(123456789);
//123456789 isn't a valid color code.

Using the fontcolor() Method Without a Variable

It is worth mentioning that the fontcolor method can be called on a string that is not stored in a variable.

The following code will work but is discouraged because it can be confusing to read.

document.write('Red Text with the fontcolor() Method'.fontcolor("red"));

JavaScript will determine that the text within the quotes is a string and apply the fontcolor() method to it.