js学习笔记23----窗口尺寸及窗口事件
窗口尺寸：
<!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>
窗口事件：
<!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----窗口尺寸及窗口事件的更多相关文章
- WPF 学习笔记－设置属性使窗口不可改变大小
原文:WPF 学习笔记-设置属性使窗口不可改变大小 调整Windows下的ResizeMode属性: ResizeMode = NoResize Resize属性是控制Windows是否可以改变大小, ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- Ext.Net学习笔记23：Ext.Net TabPanel用法详解
Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
随机推荐
- ssh-keygen配置
1) 在本地机器中的~/.ssh/目录下执行下命令, ssh-keygen -t dsa 将生成两个文件,id_dsa和id_dsa.pub. 2) 将id_dsa.pub拷贝到远程机器,并且将id_ ...
- IIS7.5 取消301重定向
今天想把一个域名解析到对应的www的域名,添加了301重定向. 结果域名解析那里是把www解析到了对应的域名,结果就是重定向循环.立即删除了IIS中重定向,结果还是无法解决. 以为是有缓存,重 ...
- C#基础视频教程7.4 如何编写简单游戏
接下来我们实现整个的游戏流程,当点击开始游戏,则需要三个事情开始运行 1 小鸟初始化并往下掉(当然还是可以用按钮让他飞一下) 2 每隔一定时间从左侧产生一个管子(宽度和高度随机,产生周期2000ms左 ...
- 使用Visual Studio 2017编译opencv 3.2版本
一.背景介绍 opencv是一个很强大的开源的计算机视觉库,应用领域如人机互动,图像处理,人脸识别,和现实生活中智能设计的关系很紧密.现在官方提供的编译包中,c++的只提供了x64位的library, ...
- 使用 RDVTabBarController 制作底部凸起的 TabBar 笔记
欢迎訪问我的个人博客http://mmoaay.photo/ 本文主要针对底部凸起的 TabBar 这样的特殊需求,不感兴趣的能够直接绕过- 近期做的一个项目须要底部凸起的 TabBar,效果例如以下 ...
- Tetris
he Tetris game is one of the most popular computer games ever created. The original game was designe ...
- 浅析C++中的this指针
转自:http://blog.csdn.net/starlee/article/details/2062586 有下面的一个简单的类: class CNullPointCall { public: s ...
- Ruby 和 Python 分析器是如何工作的？
你好! 我作为一名编写Ruby profiler的先驱,我想对现有的Ruby和Python profiler如何工作进行一次调查. 这也有助于回答很多人的问题:“你怎么写一个profiler?” 在这 ...
- HDU 1695 GCD（容斥定理）
GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- ORID方法在敏捷中的利用
Objective: 上个迭代有哪些让你印象深刻的事情发生?你看到了什么? Reflective:哪些场景让你兴奋?哪些地方不那么顺利? Interpretive:为什么会不顺利?这些数据使你意识到了 ...