How to change colour of font using javascript

change colour of font

Those two parentheses denote the method and hold instructions on what should happen. For instance:

<SCRIPT LANGUAGE=”javascript”>
document.write(‘<FONT COLOR=green>Green Text</FONT>’)
</SCRIPT>

That script will produce this: Green Text
See what’s happening? The document is being acted upon by the method “write.” Inside the ( and the ) is what should be written to the page. In this case, green text.

Also Read : Tips to avoid JavaScript Mistakes

You can use the HTML tag in order to apply font size, font color in one line on JavaScript, as well as you can use .fontcolor() method to define color, .fontsize() method to define the font size, .bold() method to define bold, etc.

Here is a list of JavaScript some useful functions:

  • .big()
  • .small()
  • .italics()
  • .fixed()
  • .strike()
  • .sup()

The below functions require parameters:

  • .fontsize() //e.g.: the size to be applied in number .fontsize(4)
  • .fontcolor(“”) //e.g.: the color to be applied in string .fontcolor(“red”)
  • .txt.link(“”) //e.g.: the url to be linkable as string .link(“www.test.com”)
  • Remember the syntax is: string.functionName() e.g.:
  • var txt = “Hello World!”;
    txt.bold

The result will be: Hello World!

You can use multiple functions in one line, adding one next to the other. e.g.:

“10/22/2018”.fontcolor(“red”).fontsize(4).bold()

The following is an example how I used it on my JavaScript code to change font (color, size, bold) using both HTML tags and JavaScript functions:

function init() { 
document.getElementById("about").style.color = 'blue';
}
function init() { 
about = document.getElementById("about");
about.style.color = 'blue';
}
$(document).ready(function(){
$('#about').css({'background-color':'black'}); 
});
function givemecolor(thecolor,thetext)
{
return ''+thetext+'';
}
document.write(givemecolor('green','I\'m an apple'));
document.write(givemecolor('yellow','and I\'m a banana'));

Discover more from mycodetips

Subscribe to get the latest posts sent to your email.

Discover more from mycodetips

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top