第51天:封装可视区域大小函数client

一、client  可视区域    

    offsetWidth:   width  +  padding  +  border     (披着羊皮的狼)  

    clientWidthwidth  +  padding      不包含border  

    scrollWidth:   大小是内容的大小    

 二、检测屏幕宽度(可视区域)

1、ie9及其以上的版本

window.innerWidth  

2、标准模式

document.documentElement.clientWidth

3、怪异模式

document.body.clientWidth

三、window.onresize    改变窗口事件  

window.onscroll  = function() {}  屏幕滚动事件

  window.onresize = function() {}  窗口改变事件

onresize 事件会在窗口或框架被调整大小时发生

 四、函数

function fun() {  语句  }         

  fun   是函数体的意思   

  fun()  调用函数 的意思  

function fun() {
    return 3;
}
console.log(fun);  // 返回函数体 function fun() { retrun 3}
console.log(fun()); // 调用函数  3  返回的是结果
fun();
window.onresize = 3
window.onresize = function fun() { retrun 3}

五、检测屏幕宽度(分辨率)

clientWidth   返回的是 可视区 大小    浏览器内部的大小

window.screen.width   返回的是我们电脑的 分辨率   跟浏览器没有关系

 

六、封装可视区域大小的函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>封装可视区域大小的函数</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>
11 <script>
12     function client(){
13         if(window.innerWidth!=null){//IE9+和最新浏览器
14             return{
15                 width:window.innerWidth,
16                 height:window.innerHeight
17             }
18         }else if(document.compatMode==="CSS1Compat"){//标准浏览器
19             return{
20                 width:document.documentElement.clientWidth,
21                 height:document.documentElement.clientHeight
22             }
23 
24         }
25         return{//怪异浏览器
26             width:document.body.clientWidth,
27             height:document.body.clientHeight
28         }
29     }
30     document.write(client().width);
31 </script>

 

posted @ 2017-10-12 22:45  半指温柔乐  阅读(277)  评论(0编辑  收藏  举报