窗口尺寸：

可视区的尺寸
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. Linux shell 提取文件名和目录名

    ${}用于字符串的读取,提取和替换功能,可以使用${} 提取字符串 1.提取文件名 [root@localhost log]# var=/dir1/dir2/file.txt [root@localh ...

  2. angularjs中使用ng-bind-html和ng-include

    下面这个例子,往div标签内添加html内容: <!doctype html> <html ng-app="myApp"> <head> < ...

  3. Android Studio之多个Activity的滑动切换（二）

    1.因为Android界面上的全部控件一般都位于Layout控件(比方RelativeLayout)之上,而布局控件能够设置响应touch事件,所以能够通过布局控件的setOnTouchListen来 ...

  4. Mysql InnoDB锁

    MySQL 不同引擎的锁机制: MyISAM和MEMORY采用表级锁(table-level locking) BDB采用页面锁(page-leve locking)或表级锁,默认为页面锁 InnoD ...

  5. Install fail! Error: [@@babel/runtime/core-js/object/keys]

    1.Install fail! Error: [@@babel/runtime/core-js/object/keys] "@babel/runtime": "7.0.0 ...

  6. PHP-Windows下搭建Nginx+PHP环境

    项目中光用Nginx了, 由于有运维人员, 很少搭建Nginx服务器, 开发也就用用Apache, 搭过几次Nginx也忘的快, 每次都去翻别人博客, 今天重搭特此记录, 装前最好了解下FastCGI ...

  7. 复制web项目，启动的时候的工程名如何改变

    右键项目->properties 然后 搜索 web  出现 Web Project Settings 右边看见  Context root 改成你希望的名字. 然后重启elipse

  8. 【转帖】Sigma水平和缺陷率的对应关系：正态分布中心和1.5标准差偏移

    http://www.pinzhi.org/thread-5395-1-1.html Sigma水平和缺陷率的对应关系:正态分布中心和有1.5个标准差偏移 在过程稳定时,若给出了规范限,过程的平均与标 ...

  9. NPOI workbook.RemoveSheetAt(0); 删除sheet页 次序 sheettmpRequire.CopySheet("Require", true);

    假如workbook的sheet页有多个 要删除第一个第二个 workbook.RemoveSheetAt(0); workbook.RemoveSheetAt(1); 这样写不行 这样写会删除第一个 ...

  10. Java SSL证书的安装

    https正在成为主流,http估计在不久的将来会被彻底放弃…… 一个Java程序需要访问一个https的网站的时候,可能需要涉及证书的安装,卸载等操作. 一.证书的下载 打开浏览器输入https:/ ...