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的 ...
随机推荐
- 苹果开发——向App Store提交应用
原地址:http://zengwu3915.blog.163.com/blog/static/2783489720137410539278/ 完成一个app应用后,肯定是要提交的,下面聊一下关于向Ap ...
- Android SDK镜像的介绍使用【转发】
由于一些原因,Google相关很多服务都无法访问,所以在很多时候我们SDK也无法升级,当然通过技术手段肯定可以解决,但是比较麻烦,而且下载速度也不怎么样. 这里笔者介绍一个国内的Android镜像站, ...
- js 多级联动（省、市、区）
js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...
- 如何判断自己家的宽带是否有公网IP
1)点击链接 http://www.net.cn/static/customercare/yourIP.asp 抓取自己的IP地址 2)打开一个命令提示符窗口 tracert <刚才获取的IP& ...
- 注意Hibernate4在开发当中的一些改变
Hibernate4的改动较大只有spring3.1以上版本能够支持,Spring3.1取消了HibernateTemplate,因为Hibernate4的事务管理已经很好了,不用Spring再扩展了 ...
- MySQL-锁研究
隔离级别研究: http://www.cnblogs.com/JohnABC/p/3521061.html 表级:引擎 MyISAM, 理解为锁住整个表, 锁定期间, 其它进程无法对该表进行写操作, ...
- GridControl摘录
gvCabTotalInfo.Columns["出线平均<br>电压"].SummaryItem.SummaryType = DevExpress.Data.Summa ...
- hibernate开发流程
开发流程,注意:每个hibernate版本在集成的时候是不太一样的.本次使用的是hibernate-distribution-3.6.10.Final-dist 一.开发流程 1)在数据库中创建表,代 ...
- django abstract base class ---- 抽象基类
抽象蕨类用于定义一些同享的列.类本身并不会在数据库端有表与之对应 一.例子: 1.定义一个叫Person 的抽象基类.Student 继承自Person from django.db import m ...
- Android中MVC、MVP、MVVM具体解释
前言 今天有时间就刚好有想写关于这几个名词.对于我来说.事实上这么多名词.思想归根究竟就是要依据项目实际.人员配置来做合理优化,既不能纸上谈兵.又不能畏惧不前.那么合理分阶段架构和完好代码才是关键,本 ...