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

最新推荐文章于 2022-05-18 14:41:53 发布

weixin_34409357

最新推荐文章于 2022-05-18 14:41:53 发布

阅读量65

点赞数

原文链接：http://www.cnblogs.com/le220/p/7658611.html

版权

一、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() 调用函数的意思

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

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>

转载于:https://www.cnblogs.com/le220/p/7658611.html

weixin_34409357

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第51天：封装可视区域大小函数client

一、client 可视区域 offsetWidth: width + padding + border （披着羊皮的狼） clientWidth： width + padding 不包含border scrollWidth: 大小是内容的大小二、检测屏幕宽度(可视区域)1、ie9及其以上的版本...
复制链接

扫一扫