JavaScript FAQ（十七）——颜色

来源：互联网发布：网络不稳定老掉线编辑：程序博客网时间：2024/05/22 17:22

十三、颜色

1. 背景色（Background Color）

Q：如何修改页面背景色？

A：可以通过设置document.bgcolor属性来改变背景色。例如，把背景色改为灰色：

document.bgColor="#CCCCCC";  // set to gray

现在就试一下（译者注：由于CSDN上代码会被自动修改，所以省去了例子）：

这里选择框由下列代码创建：

<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 Colors）

Q：如何更改页面的文本和超链接的颜色？

A：你可能被告知前景色（也就是文本和链接的颜色）是不可能改变的，因为JavaScript属性document.fgColor，document.linkColor以及类似的一些都是只读的，你不能设置这些属性。这意味着，在页面BODY标签中定义的颜色将保持不变，无论你尝试设置什么；你所能做的就是改变背景色。

嗯，这种说法不错……几乎正确……不过试一下这个：

它的原理是：脚本保存新的颜色设置，然后重载页面，读取保存的设置并使用document.write重写BODY标签设置新颜色。什么？保存？你可能会问，JavaScript真的可以保存文件？？？

这个技巧很简单：脚本不能把新的颜色设置保存到文件，但是却可以保存为另外一个窗口或者框架的变量。另外，即使没有另外的窗口或者框架变量，那么脚本仍然可以使用cookie.

这个页面上的脚本同时使用了两种技术，cookie和顶层框架中的变量。因此，这个脚本只有在用户禁用cookie或者该页本来就是浏览器的顶层窗口，不能重设文本和链接的颜色。如果你想重用这段代码，只需要从该页的源代码中赋值就行了。

只有一个终极提示：在Internet Explorer 4中，属性document.fgColor, document.linkColor、document.vlinkColor、document.alinkColor不再是只读。你可以设置这些属性的值而改变颜色。

下面是原文例子中的源代码：

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">LINK 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=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（在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转化（Hex-to-RGB Conversion）

Q：如何把一个十六进制的颜色字符串（例如，“FFFFCC”）转化相同颜色的数字RGB值？

A：下面的脚本完成了这个转化：

R = HexToR("#FFFFFF");G = HexToG("#FFFFFF");B = HexToB("#FFFFFF");function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

试一下：

4. RGB-to-Hex转化（RGB-to-Hex Conversion）

Q：如何将RGB表示的颜色转化一个十六进制的字符串。

A：算法是：保证RGB值在0……255之间，转化RGB值到hex字符串，然后合并三个字符串。

下面是转化脚本：

function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}function toHex(N) { if (N==null) return "00"; N=parseInt(N); if (N==0 || isNaN(N)) return "00"; 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);}

译者注：示例省略，可以到原文页面运行。

5. 颜色名称（Color Names）

Q：JavaScript支持的颜色名称有哪些？

A：在旧版浏览器中（如Internet Explorer 3.x），JavaScript只支持16个颜色名称：

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

在较新版本的浏览器中，支持很多颜色名称（见下面的列表）。你可以在这里试一下这些颜色（译者注：在这里不能运行，请到原文页）：