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的 ...
随机推荐
- 总想自己动动手系列·2·本地和外网（Liunx服务器上部署的web项目）按照自定义的报文格式进行交互（完结篇）
一.准备工作 (1)创建一个web-project工程,部署本地可正常访问,部署在云服务上可访问. (2)理解如何在web.xml文件中配置过滤器,和创建一个自定义的过滤器. (3)懂得如何打war包 ...
- 算法笔记_143:构造无向图的欧拉回路(Java)
目录 1 问题描述 2 解决方案 1 问题描述 具体链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Item ...
- WCF学习笔记之序列化
DataContractAttribute 与 DataMenberAttribute DataContractAttribute该特性只能用于枚举.类和结构体,而不能用于接口:又因为DataCont ...
- Java注解与自己定义注解处理器
动机 近期在看ButterKnife源代码的时候.竟然发现有一个类叫做AbstractProcessor,并且ButterKnife的View绑定不是依靠反射来实现的,而是使用了编译时的注解,自己主动 ...
- [转发]using的几种用法
1.using指令.using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到. ...
- 【LeetCode】103. Binary Tree Zigzag Level Order Traversal
Binary Tree Zigzag Level Order Traversal Given a binary tree, return the zigzag level order traversa ...
- Postman+Postman interceptor的安装和使用-解决把chrome浏览器登录状态同步到postman进行有依赖的接口测试 Postman 使用方法详解
Postman+Postman interceptor的安装和使用-解决把chrome浏览器登录状态同步到postman进行有依赖的接口测试 问题引入:做接口测试时,有依赖关系的接口往往不好测试( ...
- pip install 安装提示unknown 包
pip install setuptools --upgrade should fix the issue
- vim资源帖
vimscript教程 http://learnvimscriptthehardway.stevelosh.com/ 阿信的vimscript http://www.axiaoxin.com/arti ...
- Ownerdrawn ComboBox
[ToolboxBitmap(typeof(ComboBox))] class ComboBoxEx : ComboBox { public ComboBoxEx() { this.DrawMode ...