时隔好~久，终于又完成一个WP站，简洁最高！~ 浏览器宽高数据读取的JS方法汇总

by: ponytail @ 14 八, 2009 in: ┨Dooooitmyself

Object-C倒腾一个月我已经基本放弃了||| 然后密集的写了近2个周的商城，要吐血，中间有时间就是折腾这个站当是放松，这两天空一点总算把它“半”完成了，如果说只有做这种东西才能有乐趣的话我还真得考虑自己以后要怎么走下去了呢。。。

做这个的时候走了不少弯路，要好好反省一下|||

网站原型在这里，效果超棒！~ 页面的加载效果超级想学来做的，因为那边用的是prototype，看见那个complete我就有点晕了，网上狂找jquery的图片加载完成用法，未果，于是就转而用基本的onload，在FF里还好，到了IE里面却没效果，研究半天发现<img src=”ooxx.jpg” onload=”ooxx()” />是没办法实现的，要把onload放src前面才行，问题我后台只写了<img src=”ooxx.jpg” />其他东西都是jquery另外塞进的，没办法排顺序||| 结果浪费了不知道多少时间调整结构啊JS啥的，却被别人告诉原来用jquery的load函数就可以了，真是要郁闷到内伤了，但是考虑整体结构要在这个例子里再使用这个效果还是比较麻烦，最开始的时候没考虑进去，so，放弃。。。

还有另外一个内容随浏览器大小改变而改变竖直方向定位的问题，监控浏览器可见区域高度的时候怎么测试都不对，不是数值固定不变就是拉大浏览器反而数值变小了，最后最后最后，才发现原来这个和页面顶部的W3C标准设置及浏览器兼容都有关系。下面是找到的资料，记录一下

网上找到的资料一般是给出上面这些获得方法，但是如果页面顶部W3C标准为transitional的话，即有<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>这样的标记的话

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==>
页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==>
页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==>
页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==>
页面对象高度（即BODY对象高度加上Margin高）