1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别

在往同事负责的页面添加我的功能时，页面总是占据屏幕上方很小一部分，我的功能是点击按钮，添加tab页，然后根据浏览器窗口大小调整页面大小。实在是崩溃至极，网上查找资料，才发现就是因为<!DOCTYPE>。

document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    document.documentElement.clientHeight ==> 可见区域高度

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
 <head>
  <title> My Test </title>
  <script language="JavaScript">

  function getHeight(){
        document.getElementById("bodyheight").innerText = document.body.clientHeight;
        document.getElementById("documentheight").innerText = document.documentElement.clientHeight;
    }
  </script>
 </head>

 <body style="border:1px red solid;">
    <p>
        <a href="javascript:getHeight()">click here</a>
        <br/>
            document.body.clientHeight = <span id="bodyheight"></span> px
        <br/>
            document.documentElement.clientHeight = <span id="documentheight"></span> px
    </p>
 </body>
</html>

IE下测试结果：
    当页面上有DOCTYPE的时候,值为
       document.body.clientHeight = 87 px
       document.documentElement.clientHeight = 935 px
    当没有DOCTYPE时
       document.body.clientHeight = 935 px
       document.documentElement.clientHeight = 935 px

DOCTYPE：
          <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
       
2、<meta> 元素

<meta name="renderer" content="webkit">
     html打开强制为极速模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">
        X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容。
   <meta http-equiv="X-UA-Compatible" content="IE=7" />无
        无论页面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        http-equiv="Content-Type" 表示描述文档类型
        content="text/HTML; 文档类型mime类型，这里为html,如果JS就是text/javascript，
        charset=utf-8 页面字符集，编码，eg:gb2312,iso-8859-1,utf-8

document.body.clientHeight和 document.documentElement.clientHeight 的区别的更多相关文章

  1. document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

    document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...

  2. document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

    背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...

  3. [No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  4. document.body.clientHeight 和 document.documentElement.clientHeight的区别

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  5. document.documentElement.clientHeight||document.documentElement.scrollHeight

    在我看<JavaScript高级程序设计>(第三版)的时候,在clientHeight和scrollHeight那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...

  6. document.body.clientHeight与document.documentElement.clientHeight

    当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. document.documentElement.clientHeight和document.body.clientHeight区别

    首先了解下document HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档节点. 所有的HTML元素都是元 ...

  8. window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight

    说这几个属性前 我说一下我的设备 我的设备有两个,一个高度为1080的显示器,一个高度为800的电脑 第一种:window.screen.height 这个方法是获取用户电脑屏幕的高度,是不关浏览器或 ...

  9. window.innerHeight和document.documentElement.clientHeight区别

    今天有人问我这个问题,做了个小例子来记录一下子. 首先这两个都是获取可视区域的高度,那他们有什么区别呢 1.window.innerHeight属于BOM(浏览器对象模型),而document.doc ...

随机推荐

  1. 【BZOJ】1104: [POI2007]洪水pow

    题意 给一个\(n * m(1 \le n, m \le 1000)\)的矩阵,如果\(a_{i, j}\)为正表示城市.\(|a_{i, j}|(|a_{i, j}| \le 1000)\)是格子\ ...

  2. Express 路由

    路由 路由是指如何定义应用的端点(URIs)以及如何响应客户端的请求. 路由是由一个 URI.HTTP 请求(GET.POST等)和若干个句柄组成,它的结构如下: app.METHOD(path, [ ...

  3. jquery输入框按下回车提交表单

    jQuery on()方法是官方推荐的绑定事件的一个方法 $('#password').on('keydown', function(e) { // 短路语法,当e.keyCode == 13成立的时 ...

  4. hdu杭电1671 / poj3630 字典树

    传送门 题意:输入n串数字 找出是否有存在串的前缀与另一个串相同 如果存在 输出NO否则输出YES 思路:用字典树解决 标记字典树总串的结尾 查找出一个串内部是否有被标记的节点 如果有那么说明存在前缀 ...

  5. 利用SQL注入漏洞登录后台的实现方法 。。。。转载

    一.SQL注入的步骤 a) 寻找注入点(如:登录界面.留言板等) b) 用户自己构造SQL语句(如:' or 1=1#,后面会讲解) c) 将sql语句发送给数据库管理系统(DBMS) d) DBMS ...

  6. 转 状态压缩DP

    引入 首先来说说“状态压缩动态规划”这个名称,顾名思义,状态压缩动态规划这个算法包括两个特点,第一是“状态压缩”,第二是“动态规划”. 状态压缩: 从状态压缩的特点来看,这个算法适用的题目符合以下的条 ...

  7. JavaScript基础 DOM的操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 一.属性和方法: window对象——浏览器 ...

  8. linux查看主机端口进程命令

    1.查看主机信息 # more /etc/hosts # Do not remove the following line, or various programs # that require ne ...

  9. 对Oracle10g rac ons服务的一些理解

    1.什么是ONS ONS(Oracle Notification Service)是Oracle Clusterware 实现FAN Event Push模型的基础.     在传统模型中,客户端需要 ...

  10. .net下Ueditor配置(主要讲解上传功能配置)

    Ueditor上传功能配置——.net 今天项目中用到Ueditor就自己配置了下,但上传功能和图片显示功能不能正确使用,就自己琢磨了下.已实现上传功能,并能显示正确的图片和文件,在线编辑功能也能使用 ...