JavaScript FAQ（十七）

txf2004

浏览: 7042525 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript 脚本框架浏览器算法

十三、颜色

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标签中定义的颜色将保持不变，无论你尝试设置什么；你所能做的就是改变背景色。

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

BGcolor light red light blue light yellow gray whiteTEXT color dark gray dark green dark blue blue brown blackLINK color dark gray dark green dark blue blue brown blackVLINK color dark gray dark green dark blue blue brown black

它的原理是：脚本保存新的颜色设置，然后重载页面，读取保存的设置并使用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}

试一下：

R: G: B:

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

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

分享到：