首頁 > 開發者 > 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>
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
在較新版本的瀏覽器中，支援很多顏色名稱（見下面的列表）。你可以在這裡試一下這些顏色（譯者註：在這裡不能運行，請到原文頁）：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
