十三、颜色
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
在较新版本的浏览器中,支持很多颜色名称(见下面的列表)。你可以在这里试一下这些颜色(译者注:在这里不能运行,请到原文页):