zoukankan      html  css  js  c++  java
  • 【javascript】标准模式与怪异模式下CSS以及JS的区别

    标准模式与怪异模式下CSS的区别

    见这篇文章《【css】怪异模式下的盒模型》

    http://www.cnblogs.com/sniper007/archive/2012/12/03/2799571.html 

    标准模式与怪异模式下JS的区别

     document.compatMode属性可以判断是否是标准模式,当 document.compatMode为“CSS1Compat”,是标准模式,“BackCompat”是怪异模式。

    区别主要体现在两方面:

    一、获取当前视口大小

    在IE,firefox,safari,opera,chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight保存的是页面视口的信息。

    在IE6中,这些属性必须在标准模式下才生效,在怪异模式下,通过document.body.clientWidth和document.body.clientHeight获取,对于混杂模式的chrome,通过document.body,document.documentElement获取的大小是一样的

     兼容代码如下:

     1 function getViewport(){
     2     var doc = document,
     3         docElem = doc.documentElement,
     4         body = doc.body;
     5     return document.compatMode === "CSS1Compat" ? {
     6         width : docElem.clientWidth,
     7         height : docElem.clientHeight
     8     } : {
     9         width : body.clientWidth,
    10         height : body.clientHeight
    11     };
    12 }
     二、获取文档的总高度

    scrollWidth,scrollHeight用于确定元素内容的实际大小。通常认为html元素是在web浏览器的视口中滚动的元素(IE6之前版本运行在怪异模式下时是body)。因此

    垂直滚动条的页面总高度总是document.documentElement.scrollHeight。

    对于不滚动的页面而言,scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系很含糊。在这种情况下,基于document.documentElement查看这些属性

    会在不同浏览器之间发现不一致的问题,如下:

    1、firefox中两组属性始终是相等的,但大小代表的是文档内容区域的实际尺寸,而非视口的尺寸。

    2、opera,safari3.1以及更高的版本、chrome中的两组属性有差别,其中,scrollWidth,scrollHeight等于视口大小,而clientWidth、clientHeight等于文档内容区域的大小。

    3、IE标准模式下,其中,scrollWidth,scrollHeight等于文档内容区域的大小,而clientWidth、clientHeight等于视口大小。

    因此在确定文档的总高度时候,必须取得scrollHeight/scrollWidth 与clientHeight/clientWidth,怪异模式下,将document.documentElement换成body

    兼容代码如下:

    1 function getScrollHeight(){
    2     var doc = document,
    3         docElem = doc.documentElement,
    4         body = doc.body;
    5     return {
    6         width : Math.max(docElem.scrollWidth, docElem.clientWidth, body.scrollWidth, body.clientWidth),
    7         height : Math.max(docElem.scrollHeight, docElem.clientHeight, body.scrollHeight, body.clientHeight)
    8     };
    9 }

     参考文档:

    《javascript高级程序设计》第三版 12.2.3 “元素大小”

  • 相关阅读:
    VS Code安装以及工作区的创建
    var let const的使用和区别
    springboot 配置mysql日期返回格式
    vue安装Node和NPM配置,路由安装。
    分组查询语句(group by函数)
    ORA-00918:未明确定义列
    内连接(inner join)
    右外连接(right join)
    左外连接(left join)
    比较oracle两表中date类型数据是否一致语句查询
  • 原文地址:https://www.cnblogs.com/sniper007/p/2800046.html
Copyright © 2011-2022 走看看