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的 ...
随机推荐
- linux安装卸载软件
转自:http://www.cnblogs.com/propheteia/archive/2012/06/26/2563383.html configure作用:是源码安装软件时配置环境用的 他根据你 ...
- 【树莓派】Linux 系统级别代理配置
在Windows下,通过代理服务器怎么去设置连接代理服务器,浏览器---->工具------>internet选项----->连接--->局域网设置------->勾选“ ...
- 算法笔记_020:深度优先查找（Java）
目录 1 问题描述 2 解决方案 2.1 蛮力法 1 问题描述 深度优先查找(depth-first search,DFS)可以从任意顶点开始访问图的顶点,然后把该顶点标记为已访问.在每次迭代的时候, ...
- 通过源码浅析Java中的资源加载
前提 最近在做一个基础组件项目刚好需要用到JDK中的资源加载,这里说到的资源包括类文件和其他静态资源,刚好需要重新补充一下类加载器和资源加载的相关知识,整理成一篇文章. 理解类的工作原理 这一节主要分 ...
- Tetris
he Tetris game is one of the most popular computer games ever created. The original game was designe ...
- spring AOP编程--AspectJ注解方式
1. AOP 简介 AOP(Aspect-Oriented Programming, 面向切面编程): 是一种新的方法论, 是对传统 OOP(Object-Oriented Programming, ...
- 如何发布本地maven项目jar包部署到nexus私服？
首先在我们的pom里面描述我们要部署的地址: <distributionManagement> <repository> <id>release</id> ...
- UVA1492 - Adding New Machine(扫描线)
UVA1492 - Adding New Machine(扫描线) option=com_onlinejudge&Itemid=8&page=show_problem&cate ...
- 【laravel54】win系下本地域名配置（解决403错误）
1.apache虚拟目录地址应该指向\laravel54\public 目录下:(TP5类似) <VirtualHost *:> DocumentRoot "D:\phpStud ...
- 快速掌握Gif动态图实现代码
版权声明:本文为博主原创文章,未经博主允许不得转载. 前言:Gif一种动态图片,网上有很多制作这个的工具,包括PS都有,但作为一名程序员,我觉得如果自己通过编写代码把它实现,不但是对代码的掌握与复习, ...