原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解

**

原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解

**

1.首先对 window对象 、 document对象做一个区别;

• window ：窗口（整个浏览器窗口），包含document;
• document ：整个HTML文档；

2.与 window 相关的宽、高：

• window.innerWidth：整个浏览器窗口的宽度；
• window.innerHeight：document起始（只是起始）到浏览器窗口底部的高度；
• window.outerWidth：整个浏览器窗口的宽度；
• window.outerHeight：整个浏览器窗口的高度；

3.与 window.screen 相关的宽、高：

• window.screen.height：用户屏幕的高度；
• window.screen.width：用户屏幕的宽度；
• window.screen.availHeight：可利用的屏幕高度，与window.screen.height一样;
• window.screen.availWidth：可利用的屏幕宽度，