JavaScript FAQ（十七）——颜色

最新推荐文章于 2024-03-14 17:16:26 发布

最新推荐文章于 2024-03-14 17:16:26 发布 · 110 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用JavaScript控制网页的颜色，包括背景色、文本色及链接色，并提供了十六进制颜色和RGB之间的转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

十三、颜色

1. 背景色（Background Color）

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

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

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

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

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

<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 redlight bluelight yellowgraywhiteTEXT color dark graydark greendark bluebluebrownblackLINK color dark graydark greendark bluebluebrownblackVLINK color dark graydark greendark bluebluebrownblack

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

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