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的 ...
随机推荐
- Python list添加新元素
append()和insert() 添加新元素现在,班里有3名同学:>>> L = ['Adam', 'Lisa', 'Bart']今天,班里转来一名新同学 Paul,如何把新同学添 ...
- ant design 中的 Select 组件常规写法
1.代码 import { Select, Spin } from 'antd'; const Option = Select.Option; <Select allowClear showSe ...
- linux下vi编辑文件
vi 文件名.进入读文件模式 按i进入编辑模式 按g切光标换到第一行,按G光标切换到最后一行. 按Esc退出编辑模式 :q退出 :wq保存退出 以上命名后面加上!表示强制运行
- ubuntu获取root权限
1.先在Terminal下设置root密码 执行 sudo passwd root 2.执行sudo su,然后根据提示来即可.
- Atitit.多媒体区----web视频格式的选择总结
Atitit.多媒体区----web视频格式的选择总结 1. 因为现阶段不同的浏览器支持的视频格式是不同的 1 2. 各浏览器Html5 Video支持的影音格式: 2 3. 解决方案是什么?Flas ...
- [svc]nginx优化25条
参考:
- AppModify修改app.config
public class AppModify { /// <summary> /// 依据连接串名字connectionName返回数据连接字符串 /// </summary> ...
- MySQL是如何做到安全登陆
首先Mysql的密码权限存储在mysql.user表中.我们不关注鉴权的部分,我们只关心身份认证,识别身份,后面的权限控制是很简单的事情.在mysql.user表中有个authentication_s ...
- python正则表达式匹配时间和IP地址
t = '19:16:30' mt = re.match(r'^(0[0-9]|1[0-9]|2[0-3]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[ ...
- spring-boot 中application.properties的各种配置
###########################################################datasource connect mysql################# ...