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

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

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

注意开头<!DOCTYPE ..>的声明，没有该声明时，document.documentElement.clientHeight 始终在Chrome中为1016 px

测试代码：

<!DOCTYPE html >

 <head>

  <title> New Document </title>

  <script language="JavaScript">

  function a(){

        document.getElementById("bodyheight").innerText = document.body.clientHeight;

        document.getElementById("documentheight").innerText = document.documentElement.clientHeight;

    }

  </script>

 </head>

 <body style= "height: 1000px;">

    <p>

        <a href="javascript:a()">click here</a>

        <br/>

            document.body.clientHeight = <span id="bodyheight"></span> px

        <br/>

            document.documentElement.clientHeight = <span id="documentheight"></span> px

    </p>

 </body>

</html>

[No000068]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. document.body.clientHeight 和 document.documentElement.clientHeight的区别

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

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

    1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...

  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. Linux-安装Oracle（CentOS-Oracle 12c）

    第一步:网络连接,在我的上一篇博客中有介绍,不再多说. 网络连接的目的:为了能使用yum命令,在网上直接下载文件. 第二步:前往oracle官网下载12c database服务器端的两个文件:(安装在 ...

  2. 配置管理工具 Puppet的安装和使用

    今天碰到一个linux下的puppet的问题,才发现原来这个是 用ruby语言编写的自动化的管理工具.有兴趣的同学,可以学习下. 这里重点讲述下 mac下 puppet的安装方法: 在Mac下采用Gi ...

  3. CentOS 6.4 服务器版安装教程(超级详细图解)

    附:CentOS 6.4下载地址 32位:http://mirror.centos.org/centos/6.4/isos/i386/CentOS-6.4-i386-bin-DVD1to2.torre ...

  4. [转载]C#使用Interlocked进行原子操作

    原文链接:王旭博客 » C# 使用Interlocked进行原子操作 什么是原子操作? 原子(atom)本意是"不能被进一步分割的最小粒子",而原子操作(atomic operat ...

  5. 利用CSS3中transparent实现三角形及三角形组合图

    ??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...

  6. CSS背景图拉伸不变形

    在线效果体验:http://hovertree.com/texiao/mobile/3.htm 请使用手机浏览器查看. css代码: .bg{ background:url(http://hovert ...

  7. Oracle常用SQL查询

    一.ORACLE的启动和关闭 1.在单机环境下要想启动或关闭oracle系统必须首先切换到oracle用户,如下: su - oracle a.启动Oracle系统 oracle>svrmgrl ...

  8. jqueryAPI使用之选择器

    好一段时间没有更新博文了.刚学习完JS基础知识后,也进入到了JQ的学习.为了能熟练掌握JQ的使用,最好的方法就是反复多练,讲JQ中的API的每个知识点都练习一遍.如果能做到这个,那么对JQ就没那么陌生 ...

  9. Aspose.Words基本操作

    一个非常好用的控件. 基本的操作可以参考伍大神的文章: http://www.cnblogs.com/wuhuacong/archive/2012/08/30/2662961.html 在这里补充四点 ...

  10. HotApp小程序统计之如何接入

    1.统计接入留存说明  更详细的说明,可以查看官网的文档 https://weixin.hotapp.cn/document 统计接入流程只需要4步 (1)注册账号 打开http://weixin.h ...