╭╰Original　Colors╯╮ - 认真工作 » 浏览器宽高 http://www.iros.me show the colorsssssss in my WORK Fri, 09 Sep 2011 06:29:08 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 时隔好~久，终于又完成一个WP站，简洁最高！~ 浏览器宽高数据读取的JS方法汇总 http://www.iros.me/new-wordpress-website-mareen.html http://www.iros.me/new-wordpress-website-mareen.html#comments Fri, 14 Aug 2009 08:56:24 +0000 ponytail http://www.originalcolors.cn/work/?p=513 您可能也喜欢：
来体验一下Chrome Experiments，玩玩JS效果吧~
jQuery 常用方法一览
使用Wordpress搭建中小型展示网站，公司篇~~ 问题+插件汇总
Wordpress 主题框架推荐，我自己爱用的 Sandbox WP 大集合~ 第16个新鲜出炉~~ 无觅 ]]> Object-C倒腾一个月我已经基本放弃了||| 然后密集的写了近2个周的商城，要吐血，中间有时间就是折腾这个站当是放松，这两天空一点总算把它“半”完成了，如果说只有做这种东西才能有乐趣的话我还真得考虑自己以后要怎么走下去了呢。。。

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

Mareen

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

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

<script>
function getInfo()
{
var s = “”;
s += ” 网页可见区域宽：”+ document.body.clientWidth;
s += ” 网页可见区域高：”+ document.body.clientHeight;
s += ” 网页可见区域宽：”+ document.body.offsetWidth + ” (包括边线和滚动条的宽)”;
s += ” 网页可见区域高：”+ document.body.offsetHeight + ” (包括边线的宽)”;
s += ” 网页正文全文宽：”+ document.body.scrollWidth;
s += ” 网页正文全文高：”+ document.body.scrollHeight;
s += ” 网页被卷去的高(ff)：”+ document.body.scrollTop;
s += ” 网页被卷去的高(ie)：”+ document.documentElement.scrollTop;
s += ” 网页被卷去的左：”+ document.body.scrollLeft;
s += ” 网页正文部分上：”+ window.screenTop;
s += ” 网页正文部分左：”+ window.screenLeft;
s += ” 屏幕分辨率的高：”+ window.screen.height;
s += ” 屏幕分辨率的宽：”+ window.screen.width;
s += ” 屏幕可用工作区高度：”+ window.screen.availHeight;
s += ” 屏幕可用工作区宽度：”+ window.screen.availWidth;
s += ” 你的屏幕设置是 “+ window.screen.colorDepth +” 位彩色”;
s += ” 你的屏幕设置 “+ window.screen.deviceXDPI +” 像素/英寸”;
//alert (s);
}
getInfo();
</script>

网上找到的资料一般是给出上面这些获得方法，但是如果页面顶部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高）

这两天公司招人，让我修改一下网站前端的招聘要求，就跑去看了看别家的，里面蛮多都要求读懂“JavaScript框架源码”，说实在jquery我也就是胡乱用用，完全没想过要读源码啊||| 半路出家JS基础都麽有的我是不是有功夫应该去看一下呢。。。

您可能也喜欢：

来体验一下Chrome Experiments，玩玩JS效果吧~
jQuery 常用方法一览
使用Wordpress搭建中小型展示网站，公司篇~~ 问题+插件汇总
WordPress 主题框架推荐，我自己爱用的 Sandbox WP 大集合~ 第16个新鲜出炉~~
无觅
标签：, , , , ,
]]> http://www.iros.me/new-wordpress-website-mareen.html/feed 6