首页 > 代码库 > JS地毯式学习四
JS地毯式学习四
1 窗口的位置
用来确定和修改 window 对象位置的属性和方法有很多。
IE 、 Safari 、 Opera 和 Chrome都提供了 screenLeft 和 screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置 。
Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息, Safari 和 Chrome 也同时
支持这两个属性。
// 跨浏览器的方法
var leftX = (typeof screenLeft == ‘number‘) ? screenLeft : screenX ;
var topY = (typeof screenTop == ‘number‘) ? screenTop : screenY;
2.窗口页面大小
Firefox 、 Safari 、 Opera 和 Chrome 均为此提供了 4 个属性: innerWidth和 innerHeight , 返回浏览器窗口本身的尺寸 ; outerWidth 和 outerHeight , 返回浏览器窗口本身及边框的尺寸。
在 IE 以及 Firefox 、 Safari 、 Opera 和 Chrome 中 , document.documentElement.clientWidt h
和 document.documentElement.clientHeight 中保存了页面窗口的信息。
PS :在 IE6 中,这些属性必须在标准模式下才有效;如果是怪异模式,就必须通 过
document.body.clientWidth 和 document.body.clientHeight 取得相同的信息。
跨浏览器获取窗口的页面大小
var width = window.innerWidth; // 这里要加 window ,因为 IE 会无效
var height = window.innerHeight;
if (typeof width != ‘number‘) { // 如果是 IE ,就使用 document
if (document.compatMode == ‘CSS1Compat‘) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
width = document.body.clientWidth; // 非标准模式使用 body
height = document.body.clientHeight;
}
}
3. 调试工具
IE8 、 Firefox 、 Chrome 、 Opera 、 Safari 都自带了自己的调试工具 , 而开发人员只习惯 了
Firefox 一种 , 所以很多情况下 , 在 Firefox 开发调试 , 然后去其他浏览器做兼容 。 其实 Firebu g
工具提供了一种 Web 版的调试工具: Firebug lite 。
以下是网页版直接调用调试工具的代码:直接复制到浏览器网址即可。
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+‘NS‘]&&F.doc
umentElement.namespaceURI;E=E?F[i+‘NS‘](E,‘script‘):F[i](‘script‘);E[r](‘id‘,b);E[r](‘src‘,I+g+T);
E[r](b,u);(F[e](‘head‘)[0]||F[e](‘body‘)[0]).appendChild(E);E=new%20Image;E[r](‘src‘,I+L);})(doc
ument,‘createElement‘,‘setAttribute‘,‘getElementsByTagName‘,‘FirebugLite‘,‘4‘,‘firebug-lite.js‘,‘rele
ases/lite/latest/skin/xp/sprite.png‘,‘https://getfirebug.com/‘,‘#startOpened‘);