首页 > 代码库 > 关于Bom下标准模式和混杂模式!

关于Bom下标准模式和混杂模式!

可以通过document.compatMode =="CSS1Compat"判断是混杂模式还是标准模式,当等于CSS1Compat的时候,

就是标准模式,而BackCompat则是混杂模式。

注意:如果是在移动端,移动端中是没有IE的,所以可以通过window去取视口大小例如:window.innerWidth

(1)、可视区宽度和高度。

  获取浏览器窗口尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:

  ①、IE9以上及现在浏览器都支持:

  window.innerWidth  获取浏览器窗口的内部宽度。

  window.innerHeight  获取浏览器窗口的内部高度。

  ②、对于IE9之前可以用:

  document.documentElement.clientWidth  表示HTML文档所在窗口的当前宽度。
  document.documentElement.clientHeight  表示HTML文档所在窗口的当前高度。

  或者可以使用:

  Document对象的body属性对应HTML文档的<body>标签

  document.body.clientWidth  
  document.body.clientHeight

(2)、实际网页尺寸。

  scrollHeight和scrollWidth,获取网页内容高度和宽度。

  scrollHeight和scrollWidth还可获取DOM元素中内容实际占用的高度和宽度。

  在IE下scrollHeight 是网页内容实际高度,可以小于clientHeight。在FF下scrollHeight 是网页内容高度,不过最小值是 clientHeight。

      也就是说网页内容实际高度小于 clientHeight 时,scrollHeight返回 clientHeight 

(3)、包含滚动条的网页尺寸。

  offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。

  offsetHeight = clientHeight(内容可视区高度) + 滚动条 + 边框。

(4)、滚动距离

  所谓滚动距离,就是可视区距离页面顶部滚动了多远,也叫网页卷去的距离。

  scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶部之间的距离 ,也就是网页被滚动的高度。

  scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离,也就是网页被滚动的宽度。

  offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶部位置,当前对象到其上级顶部的距离,或者距离页面顶部的距离。

  offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 ,当前对象到其上级左端的距离,或者距离页面左端的距离。

  offsetTop和offsetLeft不能赋值,设置对象到页面顶部的距离可用style.top属性,设置对象到页面左部的距离请用style.left属性。

  offsetParent:页面中设置postion属性(relative、absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。该属性用于获取一个元素用于定位的父级,语法:obj.offsetParent

  window的六大属性,同时它们也是对象:

  document主要操作web加载的网页文档;

  frames为窗口框架对象数组;

  history保存用户上网记录;

  location提供加载的文档有关信息以及控制页面跳转;

  navigator对象存储浏览器名称及版本信息;

  screen显示屏幕相关信息。

关于Bom下标准模式和混杂模式!