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

时间：2022-10-05 21:32:00

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&period;documentElement&period;clientHeight 与 document&period;body&period;clientHeight&lpar;杜绝千篇一律的抄袭&excl;&excl;&rpar;

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

  2. document&period;documentElement&period;clientHeight 和 &dollar;&lpar;window&rpar;&period;height&lpar;&rpar; 无法正确获取页面可视区高度

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

  3. &lbrack;No000068&rsqb;document&period;body&period;clientHeight 和 document&period;documentElement&period;clientHeight 的区别

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

  4. document&period;body&period;clientHeight 和 document&period;documentElement&period;clientHeight的区别

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

  5. document&period;documentElement&period;clientHeight&vert;&vert;document&period;documentElement&period;scrollHeight

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

  6. document&period;body&period;clientHeight与document&period;documentElement&period;clientHeight

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

  7. document&period;documentElement&period;clientHeight和document&period;body&period;clientHeight区别

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

  8. window&period;screen&period;height和window&period;screen&period;availHeight和document&period;body&period;clientHeight和document&period;documentElement&period;clientHeight

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

  9. window&period;innerHeight和document&period;documentElement&period;clientHeight区别

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

随机推荐

  1. 利用React实现表头维度功能

    这是我真正意义上地用react实现一些东西.这次分享的是一个很简单的小组件,效果图先放上来: 前端样式用的是一套框架.功能很简单,就是根据选择的维度,在成员里选择对应这个维度的选项. 首先初始化一些数 ...

  2. java&period;lang&period;Boolean-&gt&semi;介绍

    介绍: public class Boolean extends Object implements Serializable, Comparable<Boolean> Boolean类是 ...

  3. SonarQube的使用入门

    SonarQube的安装.配置与使用 详情请参照原博客:http://www.cnblogs.com/qiaoyeye/p/5249786.html SonarQube是管理代码质量一个开放平台,可以 ...

  4. ie下不显示图片

    IE支持的图片是必须为RGB三原色的,保存图片时,必须“另存为web可用的格式...”

  5. uva 10026 Shoemaker&&num;39&semi;s Problem

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  6. 青蛙的约会&lt&semi;数论，extgcd&gt&semi;

    青蛙的约会 题意: 在一个圆上有一个零刻度点,公青蛙和母青蛙分别在A点和B点<不同的位 置>,他们每秒行走的距离分别是m和n,圆的周长是L.问题是这两个青 蛙能不能相遇,若能在什么时候相遇 ...

  7. 一起学Android之ToggleButton和Switch

    本文以一个简单的小例子,简述在Android开发中ToggleButton(开关按钮)和Switch(开关)的简单使用,仅供学习分享使用. 概述 ToggleButton是一个有两种状态(checke ...

  8. 新版谷歌浏览器怎么查找和改变编码格式 IT开发人员谷歌的编码格式

    解决方法在最下面,还有可下载的安装包 今天,无意中在解决一个乱码问题,后台是有过判断解决兼容性问题,但是有个别电脑还是有乱码问题,就去想改变下前台的编码格式,突然发现一向好用的谷歌,居然找不到编码格式 ...

  9. p值还是 FDR &quest;

    p值还是 FDR ? 差异分析 如何筛选显著性差异基因,p value, FDR 如何选 经常有同学询问如何筛选差异的基因(蛋白).已经计算了表达量和p value值,差异的基因(蛋白)太多了,如何筛 ...

  10. Java 8方法引用使用指南

    [编者按]本文作者为拥有15年 Java 开发经验的资深程序员 Per-Åke Minborg,主要介绍如何灵活地解析 Java 中的方法引用.文章系国内 ITOM 管理平台 OneAPM 编译呈现. ...

相关文章