Home » Computers » How to Let Website Visitors Change the Background and Text Colors

How to Let Website Visitors Change the Background and Text Colors

You can add fun functionality to your website by letting your visitors change the text and background colors with simple dropdown menus. Try it:

To add this option to your website, you need to create HTML id tags for the area in which the background color and text color will be changed. Then create two drop down menus with your choice of colors.

(Step 1) Open your site in an HTML editor or Notepad so that you can edit the code by hand. First make sure that you have a DOCTYPE specified before the opening HTML tag. For instance, something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

(Step 2) Identify the area of your website where you want the colors to be changed and add this pair of div tags to the beginning of that section:

Now add this pair of closing tags at the end of the section:

If you save and compile, you'll notice that nothing has changed yet. This is because we haven't yet added the color-change script and dropdown menus. The id tags serve as name references for the next step.

(Step 3) Locate the area where you want visitors to access the dropdown menus. Copy and paste these lines of HTML and JavaScript code:

Notice where the id tags are referenced by the "getElementById" commands. This code generates a set of dropdown menus with four background colors and four text colors. Each color is uniquely identified by a 6-digit hexadecimal number, as seen within the quotation marks.

You can easily add more color choices by following the template and inserting additional option tags. To find more colors and their hex codes, see the Had2Know.org Color Generator.