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‘);

JS地毯式学习四

时间: 2024-08-26 14:06:39

JS地毯式学习四的相关文章

JS地毯式学习三

1. 插件是一类特殊的程序 . 他可以扩展浏览器的功能 , 通过下载安装完成 . 比如 , 在线音乐.视频动画等等插件. // 检测非 IE 浏览器插件是否存在function hasPlugin(name) {var name = name.toLowerCase();for (var i = 0; i < navigator.plugins.length; i ++) {if (navigator.plugins[i].name.toLowerCase().indexOf(name) >

JS地毯式学习一

1.<noscript> 现代浏览器都对JavaScript进行了支持,一般是在用户的浏览器禁用了脚本的情况下才会显示<noscript>的内容. 包含在<noscript>元素中的内容只有在下列情况下才会显示出来: 浏览器不支持脚本: 浏览器支持脚本,但脚本被禁用. 2. Object 类型 创建 Object 类型有两种.一种是使用 new 运算符,一种是字面量表示法. 两种属性输出方式alert(box.age);alert(box['age']); 3.Arra

JS地毯式学习二

1.递归算法 a. function box(num){if(num<=1){ return 1;}else{ return num*box(num-1);}}alert(box(5)); b.函数内部调用它本身 ,可以用arguments.callee替代它函数名box: 这样可以一旦改变其名字,里边的就可以不用一一修改 function box(num){if(num<=1){ return 1;}else{ return num* arguments.callee(num-1);}}al

nodejs学习四 Node.js NPM

什么是NPM? 不知道大家注意没有,windows平台下的Node.js安装包大小才区区4M多,真可以用短小精悍来形容它,作为一种编程语言,像java一个SDK 就几十M,为什么node.js的运行环境这么小呢?这其中的微妙之处在于,它拥有一个庞大的第三方软件库. 在Node本身提供的包(原生)中没有我们要实现的功能模块的时候,我们可以去寻找下是否已经有人实现了这种功能.毕竟重复造轮子这种事情,很多人都不想干. 去哪里寻找我们想要的包呢?如果你还不知道报的名字,你可以去https://www.n

C语言零基础项目驱动式学习第四天

//类型修饰符  数组名[数组元素个数] = {初始化}; //定义数组的时候[]中必须是常量表达式, 不可以是变量; /* int age[5] = {21, 18, 25, 20, 18}; int array[10] = {0};//代表数组中有10个元素, 每个都是0; int array1[8] = {1};//代表数组中有8个元素,第一个是1,其余的为0; int age2[2 + 3] = {0}; */ //定义数组和使用数组的最大区别是, 前面是否有类型修饰符 //使用数组元素

springMVC3学习(四)--访问静态文件如js,jpg,css

如果你的DispatcherServlet拦截的是*.do这样的URL,就不存在访问不到静态资源的问题 如果你的DispatcherServlet拦截了"/"所有的请求,那同时对*.js,*.jpg的访问也就被拦截了. 我们在进行springMVC开发时,必定会在jsp页面引入js.img和css等文件. 大多数人会将这些分类存放在WebRoot文件下新建的文件夹下面. 同时,会在web.xml文件中配置拦截所有请求.这样就造成了页面无法访问到js.img和css文件夹中的文件了 方法

【学习笔记】——原生js中常用的四种循环方式

一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出"欢迎下次光临" 在网页中弹出框输入1   网页输出"查询中--" 在网页中弹出框输入2   网页输出"取款中--" 在网页中弹出框输入3   网页输出"转账进行中--" 在网页中弹出框输入其他字符   网页输出"无效按键" 四种循环: for循环 while循环 for  in

项目中走马观花式学习PHP

项目中走马观花式学习PHP 因项目缘故,需要快速补充php知识,个人有asp基础,较熟悉aspx.c#winform编写,故选择了快速阅读PHP相关资料.整理了一下,给大家参考.阅读的资料都是来自网络,我也不说不清作者是谁了,这里要对带我们这些菜鸟飞的前辈和大神们表示感谢.此外和我一样学过asp的朋友请百度一下php和asp语法的不同,对自己帮助很大. 第一部分相关知识补充 一.PHP准备工作 (一)PHP环境搭建(略) 建议使用apm,修改相关的参数即可搭建好环境.详情随便百度一下.... 第

Vue.js响应式原理

本文和大家分享的主要是Vue.js 响应式原理相关内容,一起来看看吧,希望对大家 学习Vue.js有所帮助. 关于Vue.js Vue.js 是一款 MVVM 框架,上手快速简单易用,通过响应式在修改数据的时候更新视图. Vue.js 的响应式原理依赖于 Object.defineProperty  ,尤大大在Vue.js 文档中就已经提到过,这也是 Vue.js 不支持 E8 以及更低版本浏览器的原因. Vue 通过设定对象属性的  setter/getter  方法来监听数据的变化,通过 g