窗口尺寸：

可视区的尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
滚动距离
document.documentElement.scrollTop[scrollLeft] //除了谷歌之外的浏览器解析
document.body.scrollTop[scrollLeft] //谷歌解析
内容宽高
obj.scrollHeight[scrollWidth]
文档宽高
document.documentElement.offsetWidth[offsetHeight];
document.body.offsetWidth[offsetHeight];（推荐使用这个）
 
示例代码：
 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>窗口尺寸大小</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <script>

             window.onload = function(){

                 //可视区的宽度

                 var width = document.documentElement.clientWidth

                 console.log('可视区的宽度为：' +  width + "px");

                 //滚动条滚动距离

                 document.onclick = function(){

                     //兼容写法

                     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                     console.log('滚动条距离上面的距离为：' + scrollTop + "px");

                 }

                 //内容高

                 var contentHeight = document.getElementById("div1").scrollHeight;

                 console.log('内容高度为：' + contentHeight + "px");

                 //文档高

                 var documentHeight1 = document.documentElement.offsetHeight; //ie10及以下会有兼容性问题

                 var documentHeight2 = document.body.offsetHeight; //推荐使用这种方法获取

                 console.log('文档高度为：' + documentHeight2 + "px");

             }

         </script>

     </head>

     <body>

         <div id="div1" style="width:100px;height:100px;border:1px solid red;padding:10px;margin:10px;">

             <div id="div2" style="width:100px;height:200px;background-color:pink;">

             </div>

         </div>

     </body>

 </html>

窗口事件：

onscroll : 当滚动条滚动的时候触发
onresize : 当窗口大小发生改变的时候发生
 
示例代码：
 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>窗口事件</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <script>

             window.onload = function(){

                 var scrollTop = null;

                 window.onscroll = function(){

                     scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                     console.log('滚动条距离上面的距离为：' + scrollTop + "px");

                 }

                 var windowWidth = null;

                 window.onresize = function(){

                     windowWidth = document.documentElement.clientWidth;

                     console.log('可视区的宽度为：' + windowWidth + "px");

                 }

             }

         </script>

     </head>

     <body style="height:2000px">

     </body>

 </html>

js学习笔记23----窗口尺寸及窗口事件的更多相关文章

  1. WPF 学习笔记－设置属性使窗口不可改变大小

    原文:WPF 学习笔记-设置属性使窗口不可改变大小 调整Windows下的ResizeMode属性: ResizeMode = NoResize Resize属性是控制Windows是否可以改变大小, ...

  2. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. Ext.Net学习笔记23：Ext.Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...

  7. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  8. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  9. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

随机推荐

  1. JAVA设计模式之 訪问者模式【Visitor Pattern】

    一.概述 訪问者模式是一种较为复杂的行为型设计模式,它包括訪问者和被訪问元素两个主要组成部分.这些被訪问的元素通常具有不同的类型,且不同的訪问者能够对它们进行不同的訪问操作.在使用訪问者模式时,被訪问 ...

  2. 【Cocos2d-x 3.0】游戏开发之android交叉编译

    作者:Senlern 转载请注明,原文链接:http://blog.csdn.net/zhang429350061/article/details/37959489 在上一篇文章我分享了如在win32 ...

  3. Androidclient性能參数监控

    背景: 在做androidclient測试的时候.有时候须要监控cpu/mem/电量消耗/界面载入时间/流量等等指标. 于是俺们就上下求索,网友告诉我两个方案:AnotherMonitor和Emmag ...

  4. iOS-字符串拼接

    // // main.m // /* 将两个字符串 NSString * str1 = @"123"; NSString * str2 = @"abc"; 拼接 ...

  5. Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接

      Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...

  6. Python 函数返回多值

    返回多值函数可以返回多个值吗?答案是肯定的.比如在游戏中经常需要从一个点移动到另一个点,给出坐标.位移和角度,就可以计算出新的坐标:# math包提供了sin()和 cos()函数,我们先用impor ...

  7. 【JS】jQuery中将数组转换成字符串join()和push()使用

    1.push()将元素依次添加至数组:2.join()将数组转换成字符串,里面可以带参数分隔符,默认[,] <script type = text/javascript> $(docume ...

  8. webqq协议分析之~~~~登陆

    最近好几个新项目积一起了,比较忙,所以博客迟迟未更新,还请各位见谅!下面来继续分析webqq协议,本章将说明如何实现登陆 1:输入QQ号和密码登陆,检测HTTP请求url如下,这是第一次登陆 http ...

  9. EasyUI combobox的panelHeight自动高度

    在使用EasyUI的时候,有时会用到combobox组件,这里的记录数不是很固定,设置为auto可能会被挡住,设置固定高度时,option很少时,也很丑 所以这里给出我自己自动调整combobox的p ...

  10. unity, ugui button 禁止重复点击

    如上图,button名称为btn_sim,当点击button后,开始播放zoomToTarget动画.为了防止在动画播放过程中再次点击button导致动画被打断,希望当首次点击button后butto ...