js学习笔记23----窗口尺寸及窗口事件

Posted 前端[色色]

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js学习笔记23----窗口尺寸及窗口事件相关的知识,希望对你有一定的参考价值。

窗口尺寸:

可视区的尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight

滚动距离
document.documentElement.scrollTop[scrollLeft] //除了谷歌之外的浏览器解析
document.body.scrollTop[scrollLeft] //谷歌解析

内容宽高
obj.scrollHeight[scrollWidth]

文档宽高
document.documentElement.offsetWidth[offsetHeight];
document.body.offsetWidth[offsetHeight];(推荐使用这个)
 
示例代码:
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <title>窗口尺寸大小</title>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width, initial-scale=1">
 7         <script>
 8             window.onload = function(){
 9 
10                 //可视区的宽度
11                 var width = document.documentElement.clientWidth
12                 console.log(可视区的宽度为: +  width + "px");
13 
14                 //滚动条滚动距离
15                 document.onclick = function(){
16                     //兼容写法
17                     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
18                     console.log(滚动条距离上面的距离为: + scrollTop + "px");
19                 }
20 
21                 //内容高
22                 var contentHeight = document.getElementById("div1").scrollHeight;
23                 console.log(内容高度为: + contentHeight + "px");
24 
25                 //文档高
26                 var documentHeight1 = document.documentElement.offsetHeight; //ie10及以下会有兼容性问题
27                 var documentHeight2 = document.body.offsetHeight; //推荐使用这种方法获取
28 
29                 console.log(文档高度为: + documentHeight2 + "px");
30             }
31         </script>
32     </head>
33     <body>
34         <div id="div1" style="width:100px;height:100px;border:1px solid red;padding:10px;margin:10px;">
35             <div id="div2" style="width:100px;height:200px;background-color:pink;">
36             
37             </div>
38         </div>
39     </body>
40 </html>

 

窗口事件:

onscroll : 当滚动条滚动的时候触发
onresize : 当窗口大小发生改变的时候发生
 
示例代码:
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <title>窗口事件</title>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width, initial-scale=1">
 7         <script>
 8             window.onload = function(){
 9                 var scrollTop = null;
10                 window.onscroll = function(){
11                     scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
12                     console.log(滚动条距离上面的距离为: + scrollTop + "px");
13                 }
14                 
15                 var windowWidth = null;
16                 window.onresize = function(){
17                     windowWidth = document.documentElement.clientWidth;
18                     console.log(可视区的宽度为: + windowWidth + "px");
19                 }
20 
21             }
22         </script>
23     </head>
24     <body style="height:2000px">
25         
26     </body>
27 </html>

 

 




以上是关于js学习笔记23----窗口尺寸及窗口事件的主要内容,如果未能解决你的问题,请参考以下文章

Qt学习笔记

js学习笔记:事件——事件流事件处理程序事件对象

《JS高程》事件学习笔记

js-权威指南学习笔记14

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法

js-权威指南学习笔记18