返回列表 上一主題 發帖

[教學] (教學第18篇)網頁物件 上篇

[教學] (教學第18篇)網頁物件 上篇

網頁物件:document,document物件我們之前已經用過了喔!還記得我們要將資料輸出到網頁上時,使用了write()方法,這個write()方法就是屬於document物件的!

其實,document物件是指:顯示於瀏覽器視窗中的網頁文件,舉凡與網頁相關的設定項目,都是document的屬性。


網頁標題
當我們使用HTML標籤來撰寫網頁文件時,都會使用<TITLE>…</TITLE>這組標籤來放置網頁的主題名稱,就如同應用程式標題列中所顯示的文件檔名一般。
7-10.png
2010-5-18 18:37


如果要利用JavaScript來設定網頁文件的標題名稱,則必須利用document物件的「title」屬性:
  1. document.title=”網頁文件標題”
複製代碼
實作學習:
利用document物件的「title」屬性設定網頁標題。
7-1.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁標題</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <form>
  7. <input type="button" value="按我" OnClick="document.title='我是JavaScript產生的網頁標題'">
  8. </form>
  9. </BODY>
  10. </HTML>
複製代碼

  • 在網頁原始碼第3行中,我們已經先利用<TITLE>標籤位網頁訂了一個標題「網頁標題」。
  • 網頁原始碼第7行,雖然我們已經為網頁預設了一個標題,但是我們在網頁中佈置了一個按鈕,按下這個按鈕會引發OnClick事件,進而執行『document.title='我是JavaScript產生的網頁標題'』這個JavaScript程式敘述,達到動態變更網頁標題的目的:
    7-2.png
    2010-5-18 18:38




  進階研究:閃爍式網頁標題
利用document物件的「title」屬性與setTimeout()方法,撰寫閃爍式網頁標題程式。
7-2.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁標題</TITLE>
  4. </HEAD>
  5. <SCRIPT LANGUAGE="JavaScript">
  6. //設定變換的旗標變數
  7. show="no"
  8. //網頁標題切換函式
  9. function titleTxt()
  10. {
  11. //旗標變數為no,網頁標題訂為"歡迎光臨"
  12. if (show=="no")
  13. {
  14. document.title="歡迎光臨"
  15. show="yes"
  16. }
  17. //旗標變數為yes,網頁標題訂為"網頁標題"
  18. else
  19. {
  20. document.title="網頁標題"
  21. show="no"
  22. }
  23. //重複呼叫網頁標題切換函式造成標題閃爍切換效果
  24. setTimeout("titleTxt()", 500)
  25. }
  26. </SCRIPT>
  27. <!-- 網頁載入時呼叫網頁標題切換函式 -->
  28. <BODY OnLoad="titleTxt()">
  29. 注意看!視窗標題列文字正在閃爍變換!!
  30. </BODY>
  31. </HTML>
複製代碼
1.png
2010-5-18 18:40
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

網頁背景色
網頁背景色在HTML裡屬於<BODY>標籤的屬性:
指定網頁背景顏色
  1. <BODY BGCOLOR=”顏色”>
複製代碼
BGCOLOR屬性的顏色值大多使用RGB16進制的顏色碼來設定,例如:要設定為紅色,則顏色碼就是「#FF0000」,當然您也可以用英文單字「RED」來替代啦。

在JavaScript中,要對網頁的背景顏色做設定,則是使用document物件的「bgColor」屬性:
  1. document.bgColor=”#RGB16進制的顏色碼/顏色英文單字”
複製代碼
實作學習:
利用document物件的「bgColor」屬性設定網頁背景色。
7-3.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁背景色</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <form>
  7. <input type="button" value="綠色背景" onClick="document.bgColor='#00ff00'">
  8. <input type="button" value="藍色背景" onClick="document.bgColor='#0000ff'">
  9. <input type="button" value="紅色背景" onClick="document.bgColor='#ff0000'">
  10. </form>
  11. </BODY>
  12. </HTML>
複製代碼
在本例中,我們在網頁中佈置了三個按鈕,按下按鈕會引發OnClick事件,進而執行『document.bgColor='顏色'』這個JavaScript程式敘述,達到動態變更網頁背景色的效果。
7-3.png
2010-5-18 18:43



進階研究:連續變換網頁背景色
利用document物件的「bgColor」屬性與setTimeout()方法,撰寫自動且連續不斷變換網頁背景設色的Javascript程式。
7-4.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁背景色</TITLE>
  4. </HEAD>
  5. <SCRIPT LANGUAGE="JavaScript">
  6. //設定背景色切換的旗標變數
  7. n=0
  8. //背景色切換函式
  9. function changecolor()
  10. {
  11. if (n == 0 )
  12.    {document.bgColor="olive"}
  13. else if (n == 1 )
  14.     {document.bgColor="teal"}
  15. else if (n == 2 )
  16.      {document.bgColor="red"}
  17. else if (n == 3 )
  18.      {document.bgColor="blue"}
  19. else if (n == 4 )
  20.      {document.bgColor="maroon"}
  21. else if (n == 5 )
  22.      {document.bgColor="navy"}
  23. else if (n == 6 )
  24.       {document.bgColor="lime"}
  25. else if (n == 7 )
  26.       {document.bgColor="fuschia"}
  27. else if (n == 8 )
  28.      {document.bgColor="green"}
  29. else if (n == 9 )
  30.       {document.bgColor="purple"}
  31. else if (n == 10 )
  32.        {document.bgColor="gray"}
  33. else if (n == 11 )
  34.       {document.bgColor="yellow"}
  35. else if (n == 12 )
  36.        {document.bgColor="aqua"}
  37. else if (n == 13 )
  38.         {document.bgColor="black"}
  39. else if (n == 14 )
  40.        {document.bgColor="white"}
  41. else if (n == 15 )
  42.        {document.bgColor="silver"}
  43. n++ //等同n=n+1
  44. //如果旗標變數值大於預設顏色的個數,則將變數內容歸零
  45. if (n>15)
  46. {n=0}
  47. //重複呼叫背景色切換函式
  48. setTimeout("changecolor()", 500)
  49. }
  50. </SCRIPT>
  51. <!-- 網頁載入時呼叫背景色切換函式 -->
  52. <BODY OnLoad="changecolor()">
  53. 不斷變換的背景顏色
  54. </BODY>
  55. </HTML>
複製代碼
7-4.png
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

網頁前景色
什麼是網頁前景色ㄚ?網頁前景色就是指網頁中文字的預設顏色啦!網頁前景色的設定在HTML裡,也是屬於屬於<BODY>標籤的屬性:
指定網頁前景色
  1. <BODY TEXT=”顏色值”>
複製代碼
TEXT屬性值你可以直接填入顏色的英文單字,也可以使用RGB16進制的顏色碼來設定。

要使用JavaScript程式動態的改變或設定網頁的前景色(網頁文字的預設文字),必須使用document物件的「fgColor」屬性:
  1. Document.fgColor=”#RGB16進制的顏色碼/顏色英文單字”
複製代碼
實作學習:
利用document物件的「fgColor」屬性設定網頁前景色。
7-5.htm
  1. <HTML>
  2. <HEAD>
  3. <TITLE>網頁前景色</TITLE>
  4. </HEAD>
  5. <!--預設網頁前景(文字)顏色為紅色-->
  6. <BODY TEXT="red" BGCOLOR="#808080">
  7. <form>
  8. 請選擇網頁前景(文字)顏色
  9. <!-- 利用document物件的fgColor屬性動態設定前景顏色>
  10. <input type="button" value="粉藍色" onClick="document.fgColor='#CCFFFF'">
  11. <input type="button" value="粉紅色" onClick="document.fgColor='#FFCCCC'">
  12. <input type="button" value="青綠色" onClick="document.fgColor='#CCFF33'">
  13. </form>
  14. </BODY>
  15. </HTML>
複製代碼
在本例中,我們在網頁中佈置了三個按鈕,按下按鈕會引發OnClick事件,進而執行『document.fgColor='顏色'』這個JavaScript程式敘述,達到動態變更網頁前景色(網頁文字預設顏色)的效果。
7-5.png
2010-5-18 18:46
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 有願放在心裡,沒有身體力行,正如耕田不播種,皆是空過因緣。
返回列表 上一主題