任務1-4　JavaScript實現動態改變網頁字體大小及關閉網頁窗口

【任務描述】

網頁0104.html的底部導航欄如圖1-5所示，分別單擊超鏈接“大”、“中”、“小”，可以動態改變網頁中文本的字體大小，單擊超鏈接“關閉”會彈出“是否關閉此窗口”提示信息對話框，在該對話框單擊【是】按鈕，將會關閉此網頁窗口。編寫代碼實現此功能。

圖1-5　網頁0104.html的底部導航欄

【思路探析】

（1）通過設置HTML元素的樣式屬性style.fontSize來改變網頁中文本的字體大小。

（2）通過調用window對象的close()方法實現關閉網頁窗口。

【特效實現】

自定義函數setFontSize()對應的代碼如表1-8所示。

表1-8　自定義函數setFontSize()對應的代碼

表1-8中自定義函數setFontSize()帶有1個參數，該參數用于傳遞字體大小數值，從JavaScript訪問某個HTML元素，可以使用document.getElementById(id)方法。使用“id”屬性來標識HTML元素。通過document.getElementById('bc')找到id為“bc”的元素，然后改變該元素的樣式屬性值。

網頁0104.html的底部導航欄對應的HTML代碼如表1-9所示。

表1-9　網頁0104.html的底部導航欄對應的HTML代碼