72表單元素寬度自適應(yīng)

任務(wù)7：163郵箱寫郵件功能實(shí)現(xiàn)2單元7.0：模塊導(dǎo)學(xué)單元7.1：實(shí)現(xiàn)郵箱主窗口功能單元7.2：創(chuàng)建寫郵件頁(yè)面單元7.3：實(shí)現(xiàn)寫郵件頁(yè)面腳本功能單元7.4：實(shí)現(xiàn)附件的添加與刪除單元7.5：發(fā)送郵件單元7.6：實(shí)現(xiàn)系統(tǒng)退信功能目錄3單元7.3：實(shí)現(xiàn)寫郵件頁(yè)面腳本功能知識(shí)點(diǎn)1：收件人和主題元素的數(shù)據(jù)驗(yàn)證知識(shí)點(diǎn)2：表單元素寬度自適應(yīng)知識(shí)點(diǎn)3：盒子rdiv的顯示與隱藏知識(shí)點(diǎn)4：文本區(qū)域滾動(dòng)條的顯示與隱藏知識(shí)點(diǎn)5：停止計(jì)時(shí)器的計(jì)時(shí)過程4教學(xué)目標(biāo)完成表單元素寬度隨瀏覽器窗口寬度變化而變化的功能設(shè)置5要實(shí)現(xiàn)的功能說明頁(yè)面元素wdiv的寬度在初始狀態(tài)通過樣式設(shè)置為300px該元素及其內(nèi)部的表單元素receiver、subject和content的寬度都要求能夠適應(yīng)頁(yè)面文檔writeemail.php的寬度并且在點(diǎn)擊圖片元素zhedieimg時(shí)，能夠根據(jù)右側(cè)元素rdiv的顯示與隱藏狀態(tài)來改變自己的寬度6功能實(shí)現(xiàn)方案若是rdiv為顯示狀態(tài)，則盒子wdiv的寬度需要取用頁(yè)面文檔寬度減去盒子rdiv和zhedie的寬度（212）之后的結(jié)果；若盒子rdiv為隱藏狀態(tài)，則盒子wdiv的寬度需要取用頁(yè)面寬度減去盒子zhedie（10）的寬度之后的結(jié)果；而表單元素receiver、subject和content的寬度則需要使用wdiv的寬度減去表格左側(cè)列寬60像素以及表單元素的左右邊框之后來得到。7定義函數(shù)wdivWidth()實(shí)現(xiàn)功能的步驟：使用代碼w=(window.document.body.offsetWidth||window.document.documentElement.offsetWidth)獲取窗口寬度使用if(document.getElementById(‘rdiv’).style.display==“none”)判斷rdiv的顯示隱藏狀態(tài)，并根據(jù)判斷結(jié)果獲取wdiv可用寬度使用“元素.style.width=…”代碼形式分別為wdiv、receiver、subject、content元素設(shè)置寬度值（注意設(shè)置樣式中的屬性取值，需要指定單位）8函數(shù)wdivWidth()的調(diào)用函數(shù)wdivWidth()在頁(yè)面加載時(shí)需要調(diào)用，在瀏覽器窗口大小發(fā)生變化時(shí)也需要調(diào)用，因此直接在函數(shù)定義完畢之后增加下面的代碼完成