JavaScript FAQ (17)--Color

13, Color

1. Background color (Background color)

Q: How to modify the background color of the page.

A: You can change the background color by setting the Document.bgcolor property. For example, change the background color to gray:

Document.bgcolor= "#CCCCCC";  Set to Gray

Try it now: because the code on the CSDN is automatically modified, you omit the example:

The selection box here is created by the following code:

<form name= "Bgcolorform" >try it now: 
<select onchange= "if (this.selectedindex!=0)
Document.bgcolor =this.options[this.selectedindex].value ">
<option value=" Choose ">set background color    
<option Value= "FFFFCC" >light yellow <option value= "ccffff"
>light blue
<option value= "CCFFCC" >light Green
<option value= "CCCCCC" >gray
<option value= "FFFFFF" >white
</select></form >

2. Foreground color (foreground Colors)

Q: How to change the color of text and hyperlinks on a page.

A: You may be told that the foreground color (that is, text and link colors) is impossible to change, You cannot set these properties because the JavaScript attribute Document.fgcolor,document.linkcolor and some of the similarities are read-only. This means that the colors defined in the body tag of the page will remain unchanged, regardless of what you are trying to set, and all you can do is change the background color.

Well, that's a good saying ... Almost right ... But try this:

bgcolor light redlight bluelight yellowgraywhitetext color Dark graydark greendark Bluebluebrownblacklink color D Ark Graydark Greendark bluebluebrownblackvlink color Dark Graydark greendark bluebluebrownblack

The idea is that the script saves the new color settings, then reloads the page, reads the saved settings, and sets the new color using the document.write rewrite Body tab. What the. Save. You might ask, JavaScript can really save the file ...

The trick is simple: The script cannot save the new color settings to a file, but it can be saved as a variable for another window or frame. In addition, the script can still use cookies even if there are no other windows or frame variables.

The script on this page also uses two techniques, cookies, and variables in the top-level frame. Therefore, the script cannot reset the text and the color of the link unless the user disables the cookie or the page is the top-level window of the browser. If you want to reuse this code, you just need to assign it from the source code of the page.

There is only one final hint: in Internet Explorer 4, Properties Document.fgcolor, Document.linkcolor, Document.vlinkcolor, Document.alinkcolor is no longer read-only. You can change the color by setting the values of these properties.

Here is the source code in the original example:

Html:

<form name= "Colors" > <p> <select name=s0 onchange= "if (this.selectedindex!=0) {backcolor=this.options[
This.selectedindex].value; Resetcolors ()} "> <option value=" Choose ">bgcolor     <option value=" FFCCCC ">light Red < Option value= "Ccffff" >light Blue <option value= "FFFFCC" >light yellow <option value= "CCCCCC" >gray < Option value= "FFFFFF" >white </select> <select name=s1 onchange= "if (this.selectedindex!=0) {textcolor=
This.options[this.selectedindex].value; Resetcolors ()} "> <option value=" Choose ">text color     <option value=" 666666 ">dark Gray < Option value= "006600" >dark Green <option value= "000099" >dark Blue <option value= "0000FF" >blue < Option value= "990000" >brown <option value= "000000" >black </select> <select name=s2 onchange= "if ( this.selectedindex!=0) {Linkcolor=this.options[this.selectedindex].value resetcolors ()} "> <option value=" Choose ">linkColor     <option value= "666666" >dark Gray <option value= "006600" >dark Green <option value= " 000099 ">dark Blue <option value=" 0000FF ">blue <option value=" 990000 ">brown <option value=" 000000 " >black </select> <select name=s3 onchange= "if (this.selectedindex!=0) {vlnkcolor=this.options[
This.selectedindex].value; Resetcolors ()} "> <option value=" Choose ">vlink color     <option value=" 666666 ">dark Gray < Option value= "006600" >dark Green <option value= "000099" >dark Blue <option value= "0000FF" >blue < Option value= "990000" >brown <option value= "000000" >black </select> </form>

JavaScript (in head):

Backcolor= "FFFFFF";
Textcolor= "000000";
Linkcolor= "0000FF";

Vlnkcolor= "660099";
 function resetcolors () {var str= ';
 str+= ' backcolor= ', ' +backcolor+ ';
 str+= ' textcolor= ', ' +textcolor+ ';
 str+= ' linkcolor= ', ' +linkcolor+ ';

 str+= ' vlnkcolor= ', ' +vlnkcolor+ ';

 Trying the top frameset if (self.location!=top.location) top.saveddocumentcolors=str;

 Trying a cookie else document.cookie= "saveddocumentcolors=" +escape (str);
 var theurl= ' +self.location;
 var ind=theurl.indexof (' # ') if (ind!=-1) theurl=theurl.substring (0,ind);
Self.location=theurl;
 function Readcolors () {if (top.saveddocumentcolors) {eval (' +top.saveddocumentcolors); return;}
  else {var thecookie= ' +document.cookie;
  var ind=thecookie.indexof (' saveddocumentcolors '); 
  if (ind==-1) return;
  var ind1=thecookie.indexof ('; ', IND); 
  if (ind1==-1) ind1=thecookie.length;
 Eval (' +unescape (thecookie.substring (IND+20,IND1));

} readcolors (); document.write (' <body ' + ' bgcolor= ' # ' +backcolor+ ') ' +' text= ' # ' +textcolor+ ' ' + ' link= ' # ' +linkcolor+ ' ' + ' vlink= ' # ' +vlnkcolor+ ' ' > '
 

3. Hex-to-rgb Transformation (HEX-TO-RGB conversion)

Q: How to convert a hexadecimal color string (for example, "FFFFCC") to a numeric RGB value of the same color.

A: The following script completes this transformation:

R = Hextor ("#FFFFFF");
G = Hextog ("#FFFFFF");
B = Hextob ("#FFFFFF");

function Hextor (h) {return parseint (Cuthex (h)). Substring (0,2),)}
function Hextog (h) {return parseint (Cuthex ( h). substring (2,4)}
function Hextob (h) {return parseint (Cuthex (h)). Substring (4,6),)}
function Cuthex (h) {return (H.charat (0) = "#")? H.substring (1,7): H}

Try this:

R:g: B:

4. Rgb-to-hex Transformation (Rgb-to-hex conversion)

Q: How to convert the RGB color representation to a hexadecimal string.

A: the algorithm is: to ensure that the RGB value of 0 ... Between 255, convert the RGB value to the hex string, and then merge the three strings.

Here is the transformation script:

function Rgbtohex (r,g,b) {return Tohex (R) +tohex (G) +tohex (B)}
function Tohex (N) {
 if (n==null) return ";
 " N=parseint (N); if (n==0 | | isNaN (N)) return ";
 " N=math.max (0,n); N=math.min (n,255); N=math.round (N);
 Return "0123456789ABCDEF". CharAt ((n-n%16)/16)
      + "0123456789ABCDEF". CharAt (n%16);

Translator Note: Example omitted, you can run to the original page.

5. Color name (colour Names)

Q: What color names are supported by JavaScript.

A: in older browsers (such as Internet Explorer 3.x), JavaScript supports only 16 color names:

Aqua #00FFFF Lime #00FF00 Silver #C0C0C0
Black #000000 maroon #800000 Teal #008080
Blue #0000FF Navy #000080 white #FFFFFF
Fuchsia #FF00FF Olive #808000 Yellow #FFFF00
Gray #808080 Purple #800080
Green #008000 Red #FF0000

In newer versions of browsers, many color names are supported (see the list below). You can try these colors here (Translator Note: Can not be run here, please go to the original page):