js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)

简介: js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)

document.compatMode的定义

document.compatMode用来判断当前浏览器采用的渲染方式,属性值有:

  • BackCompat:标准兼容模式关闭。
  • CSS1Compat:标准兼容模式开启。

当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;

当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。

浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

应用场景——准确获取浏览器宽高等尺寸

准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top:

if (document.compatMode == "BackCompat") {
  cWidth = document.body.clientWidth;
  cHeight = document.body.clientHeight;
  sWidth = document.body.scrollWidth;
  sHeight = document.body.scrollHeight;
  sLeft = document.body.scrollLeft;
  sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
  cWidth = document.documentElement.clientWidth;
  cHeight = document.documentElement.clientHeight;
  sWidth = document.documentElement.scrollWidth;
  sHeight = document.documentElement.scrollHeight;
  sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
  sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

目录
相关文章
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-方法
文章通过示例代码讲解了JavaScript中如何给对象添加方法以及如何调用这些方法。
18 2
JavaScript基础知识-方法
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
15 1
JavaScript基础知识-数组的常用方法
|
3天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
2天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
|
2天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
|
3天前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
|
3天前
|
JavaScript
JS数组合并的常用方法
JS数组合并的常用方法
|
16天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
21天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
43 0
|
21天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
44 0