JavaScript DOM——可视宽高、标准模式和混杂模式

一、获取宽度和高度(文档、可视区域).

a) document.documentElement ===》文档 的 文档元素
#获取可视区域的宽


b) document.body) ===》文档 的 body
#获取body的宽

注：获取可视区域的宽度和高度：clientWidth、clientHeight



从这里可以看出左右各8px的边距，1186和1170正好相差16px

设置边距为0，那么结果还是1186


#获取浏览器可视区域和body的高度




二、标准模式和混杂模式
标准模式: document.documentElement
混杂模式: document.body
#案例：点击btn弹出页面文档从上到下偏移了多远（滚动条从上到下拉动多远）

标准模式: document.documentElement 火狐、IE浏览器支持


混杂模式: document.body 谷歌浏览器支持

兼容处理：document. Body || document. documentEl ement

#补充：
1.位运算符
1》位运算符：（|）
#两个位只要有一个为1，那么结果都为1；否则就为0。
#l运算符还能进行取整运算
2》还有一个位运算符是：&
运算方法：
两个数值的个位分别相与，同时为1才得1，只要一个为0就为0。
2. 逻辑运算符
#JS中的||符号：
运算方法：
只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。
总结：真前假后
#JS中的&&符号：
运算方法：
只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值。
只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值。
总结：假前真后