舉例如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | function run() { var c = randomColor(); document.getElementById( "show" ).innerHTML = "<br / >" + c; document.linkColor = c; } function randomColor() { var c1 = (Math.random() * 1000) % 256; var c2 = (Math.random() * 1000) % 256; var c3 = (Math.random() * 1000) % 256; c1 = hex(Math.floor(c1)); c2 = hex(Math.floor(c2)); c3 = hex(Math.floor(c3)); return "#" + c1 + c2 + c3; } function hex(n) { var result = "" ; var temp, count; while (n > 16) { count = 1; while (n > exp(16, count)) { count += 1; } count -= 1; temp = n / exp(16, count); temp = Math.floor(temp); result += hexLetter(temp); n -= exp(16, count) * temp; } if (n == 16) { result += "1" ; n -= 16; } result += hexLetter(n); return result; } function hexLetter(n) { if (n >= 16 || n < 0) { return "" ; } else { switch (n) { case 10: return "A" ; case 11: return "B" ; case 12: return "C" ; case 13: return "D" ; case 14: return "E" ; case 15: return "F" ; default : return "" + n; } } } function exp(x, y) { var result = 1; while (y > 0) { result *= x; y -= 1; } return result; } /* 《程式語言教學誌》的範例程式 檔名:document017.js 功能:示範 JavaScript 程式 作者:張凱慶 時間:西元 2011 年 8 月 */ |
此例是藉由 randomColor() 函數 (function) 產生隨機的顏色,然後在 run() 中
3 4 | document.getElementById( "show" ).innerHTML = "<br / >" + c; document.linkColor = c; |
先在 id 屬性 (attribute) 為 show 的元素顯示顏色的十六進位數字,然後將此顏色指派給 linkColor 。
我們以下面的 HTML 文件載入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> < html > < head > < title >HTML DOM DEMO</ title > < script src = "document017.js" type = "text/javascript" ></ script > </ head > < body > < input type = "button" value = "RUN" onclick = "run();" > < span id = "show" ></ span > </ body > </ html > <!-- 《程式語言教學誌》的範例程式 檔名:document017.html 功能:示範 JavaScript 程式 作者:張凱慶 時間:西元 2011 年 8 月 --> |
瀏覽器 (broswer) 開啟,首先,按下 RUN 連結文字就變成隨機顏色

中英文術語對照 | |
---|---|
元素 | element |
樣式 | style |
函數 | function |
屬性 | attribute |
瀏覽器 | broswer |
您可以繼續參考
基本概念
文件物件 document
- 屬性
- document.activeElement
- document.alinkColor
- document.anchors
- document.bgColor
- document.cookie
- document.documentElement
- document.documentURI
- document.forms
- document.images
- document.inputEncoding
- document.lastModified
- document.lastStyleSheetSet
- document.linkColor
- document.links
- document.location
- document.plugins
- document.preferredStyleSheetSet
- document.readyState
- document.referrer
- document.selectedStyleSheetSet
- document.styleSheets
- document.styleSheetSets
- document.title
- document.URL
- document.vlinkColor
- 方法
- document.close()
- document.createAttribute(name_str)
- document.createElement(element_str)
- document.createTextNode(text_str)
- document.enableStyleSheetsForSet(ss_str)
- document.getElementById(id_str)
- document.getElementsByClassName(cn_str)
- document.getElementsByName(n_str)
- document.getElementsByTagName(tn_str)
- document.hasFocus()
- document.open()
- document.write(str)
- document.writeln(str)
相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁
參考資料
https://developer.mozilla.org/en/DOM/document.linkColor
http://msdn.microsoft.com/en-us/library/ms534117(VS.85).aspx
沒有留言:
張貼留言