CSS获取浏览器尺寸.doc

CSS 获取浏览器尺寸 在以前的代码中, 对贴子中超过746像素宽的图像自动调整为746大小。现在用宽屏显示器的越来越多，需要将ubbshow.js中的图像重绘代码作些修改，使图像大小随屏幕大小及不同的css风格自动调整。该代码运行的前提是先为headerbg样式指定个ID名,也就是把header.asp中的class=headerbg之前加上一句id=headerbg, 这样后面的代码就能访问这个headerbg对象了.实现该功能需考虑两个问题, 一个是获取当前屏幕大小,另一个问题是确认当前采用的什么风格文件, 因为即使屏幕为1024px宽,而风格采用的是极速, 图片也不能放大到1024宽,那样就会撑破极速的窗口。实 现的思路如下，为header.asp文件中的headerbg样式指定个ID，然后在js中读取该ID样式中的width值，如width值为具体数 字，则直接采用该宽度，如为100%，则取当前屏幕宽度。需要注意的是，读取的值是字符串，使用前应用parseInt函数将其变为整数。需要用到的有关函数或方法:parseInt(); 将括号中的内容转换为整数型.getElementById() 获取ID号对象.currentStyle.width 对象属性值getElementById(对象ID名).currentStyle.width即为对象的当前样式中的宽度值.关于屏幕控制的有关属性: 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth ubbshow.js中DrawImage过程代码如下： 程序代码: [ 复制代码 ][ 运行代码 ] function DrawImage(ImgD){var swidth=document.getElementById(headerbg).currentStyle.width; //获取headerbg对象的宽度,此宽度就是lbbs头背景宽度,也??是lbbs的显示宽度swidth=parseInt(swidth);??//值转换为整型数字if(swidth==100) {swidth=document.body.clientWidth;} //对于定义宽度为100%的情况,如w_950.css, 直接取当前屏幕宽度swidth=swidth-40; //为图像留白,所以宽度减去一些. 可自行修改var image=new Image(); image.src=ImgD.src; if(image.width0 image.height0){ ??flag=true; ??if(image.width=swidth){ ???ImgD.width=swidth; ???ImgD.height=(image.height*swidth)/image.width; ??}else{ ???ImgD.width=image.width; ???ImgD.height=image.height; ??}??} }?? img?? {? ??????? height:expression(document.body.clientHeight-50); }