一、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 window.innerWidth, 16 height:window.innerHeight 17 } 18 }else if(document.compatMode==="CSS1Compat"){//标准浏览器 19 return{ 20 document.documentElement.clientWidth, 21 height:document.documentElement.clientHeight 22 } 23 24 } 25 return{//怪异浏览器 26 document.body.clientWidth, 27 height:document.body.clientHeight 28 } 29 } 30 document.write(client().width); 31 </script>