• Register
36,800 points
11 5 4

Changing the color of text on a web page gives users an unexpected interactive experience and is one of the most effective ways to impact web page design. A user can change the text colors using JavaScript and style settings employing one of the many techniques in the HTML code.


Step 1:

Create HTML elements that contain text. This example shows how to create three tags that can use JavaScript functions created in the following steps:

  • Change the color of the Div (changes the color of the Div)
  • Change this paragraph text color. (Change the text color of this paragraph.) Change the span tag color.

Step 2:

Create the function for the div tag. The following JavaScript function takes the div tag created in step 1 and changes the color to red:

 function divColorChange () {document.getElementById ('myDiv'). Style.color = '# FF0000';}

Step 3:

Change the color of the paragraph label. The following JavaScript function changes the text color of the paragraph element created in step 1 to white:

 function paraColorChange () {document.getElementById ('myParagraph'). Style.color = '# 000000';}

Step 4:

Change the color of the expansion label. Finally change the text label to black with the following code:

 {document.getElementById ('mySpan'). Style.color = '#FFFFFF';}

Step 5:

Create buttons to request JavaScript functions. The functions are created but nothing happens until you ask for them in the HTML code. The following code creates buttons. When a user clicks one of the buttons, the corresponding JavaScript function is called: Div colour, paragraph colour and span colour.

36,800 points
11 5 4