JavaScript FAQ（十七）——颜色

最新推荐文章于 2024-04-18 17:52:13 发布

mydeman

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量1.6k

点赞数

分类专栏：翻译 JavaScript FAQ Web开发 JavaScript JavaScript FAQ 文章标签： javascript function 脚本 internet 浏览器 colors

Web开发同时被 3 个专栏收录

82 篇文章 0 订阅

订阅专栏

JavaScript

43 篇文章 0 订阅

订阅专栏

翻译

33 篇文章 0 订阅

订阅专栏

十三、颜色

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

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

mydeman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript FAQ（十七）——颜色

十三、颜色 1. 背景色（Background Color）Q：如何修改页面背景色？A：可以通过设置document.bgcolor属性来改变背景色。例如，把背景色改为灰色：document.bgColor="#CCCCCC"; // set to gray 现在就试一下（译者注：由于CSDN上代码会被自动修改，所以省去了例子）：这里选择框由下列代码创建：Try it now: <sele
复制链接

扫一扫