• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見(jiàn)問(wèn)題 >> 前端開(kāi)發(fā) >> css >> css適應(yīng)瀏覽器大小 -創(chuàng)新互聯(lián)

css適應(yīng)瀏覽器大小 -創(chuàng)新互聯(lián)

• 作者：創(chuàng)新互聯(lián) 文章來(lái)源：前端開(kāi)發(fā)部 點(diǎn)擊數(shù)： 更新時(shí)間：2010-01-10
• 　　在以前的代碼中, 對(duì)貼子中超過(guò)746像素寬的圖像自動(dòng)調(diào)整為746大小�，F(xiàn)在用寬屏顯示器的越來(lái)越多，需要將ubbshow.js中的圖像重繪代碼作些修改，使圖像大小隨屏幕大小及不同的css風(fēng)格自動(dòng)調(diào)整。
  
  　　該代碼運(yùn)行的前提是先為headerbg樣式指定個(gè)ID名,也就是把header.asp中的class='headerbg'之前加上一句id='headerbg', 這樣后面的代碼就能訪問(wèn)這個(gè)headerbg對(duì)象了.
  
  　　實(shí)現(xiàn)該功能需考慮兩個(gè)問(wèn)題, 一個(gè)是獲取當(dāng)前屏幕大小,另一個(gè)問(wèn)題是確認(rèn)當(dāng)前采用的什么風(fēng)格文件, 因?yàn)榧词蛊聊粸?024px寬,而風(fēng)格采用的是極速, 圖片也不能放大到1024寬,那樣就會(huì)撐破極速的窗口。
  
  　　實(shí)現(xiàn)的思路如下，為header.asp文件中的headerbg樣式指定個(gè)ID，然后在js中讀取該ID樣式中的width值，如width值為具體數(shù)字，則直接采用該寬度，如為100%，則取當(dāng)前屏幕寬度。需要注意的是，讀取的值是字符串，使用前應(yīng)用parseInt函數(shù)將其變?yōu)檎麛?shù)。
  
  需要用到的有關(guān)函數(shù)或方法:
  parseInt(); 將括號(hào)中的內(nèi)容轉(zhuǎn)換為整數(shù)型.
  getElementById() 獲取ID號(hào)對(duì)象
  .currentStyle.width 對(duì)象屬性值
  getElementById("對(duì)象ID名").currentStyle.width即為對(duì)象的當(dāng)前樣式中的寬度值.
  
  關(guān)于屏幕控制的有關(guān)屬性:
  網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘篸ocument.body.clientWidth
  網(wǎng)頁(yè)可見(jiàn)區(qū)域高：document.body.clientHeight
  網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)
  網(wǎng)頁(yè)可見(jiàn)區(qū)域高：document.body.offsetHeight (包括邊線的寬)
  網(wǎng)頁(yè)正文全文寬：document.body.scrollWidth
  網(wǎng)頁(yè)正文全文高：document.body.scrollHeight
  網(wǎng)頁(yè)被卷去的高：document.body.scrollTop
  網(wǎng)頁(yè)被卷去的左：document.body.scrollLeft
  網(wǎng)頁(yè)正文部分上：window.screenTop
  網(wǎng)頁(yè)正文部分左：window.screenLeft
  屏幕分辨率的高：window.screen.height
  屏幕分辨率的寬：window.screen.width
  屏幕可用工作區(qū)高度：window.screen.availHeight
  屏幕可用工作區(qū)寬度：window.screen.availWidth
• 友情鏈接自動(dòng)換行css兼容性完美解決方案 :上一篇
  CSS樣式表與具體設(shè)備 :下一篇