第51天：封装可视区域大小函数client
一、client 可视区域
offsetWidth: width + padding + border （披着羊皮的狼）
clientWidth： width + 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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录