document.documentElement.clientHeight和document.body.clientHeight区别
首先了解下document
HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
Document 对象
当浏览器载入HTML 文档，它就会成为 Document 对象。
Document对象是HTML文档的根节点。
Document对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
通过document访问页面内的元素，document.documentElement返回html dom中的root 节点 即<html>，document.body返回html dom中的body节点 即<body>。
所以document.documentElement是<html></html>元素，document.body是<body></body>元素。如果发现两个高度不一样，是css设置的问题，你的html高度不一定高于body。
用body查看，其中clientHeight即为body的css高度
用documentElement，其中clientHeight即为html的css高度
网上很多说document.documentElement.clientHeight或者document.body.clientHeight为可见高度，其实这要看body或者html标签的css怎么设的，当body的height（css设定）一开始就和scrollHeight相等时，是不能作为可见高度的。
document.documentElement.clientHeight和document.body.clientHeight区别的更多相关文章
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- document.body.clientHeight与document.documentElement.clientHeight
当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- document.documentElement和document.body区别
body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下 区别: body是DOM对象里的 ...
- document.documentElement和document.body区别介绍
document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...
- document.documentElement和document.body区别以及获取浏览器的宽高
原文:http://www.jb51.net/article/41410.htm 1.区别: body是DOM对象里的body子节点,即 <body> 标签: documentElemen ...
- 【转】document.documentElement和document.body的区别
转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...
- document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
- document.body 与 document.documentElement区别介绍
什么是document.body? 返回html dom中的body节点 即<body> 什么是 document.documentElement? 返回html dom中的root 节点 ...
随机推荐
- linux-git
- centos7 安装oracle 11g数据库
1.新建oracle用户 groupadd oracle useradd -g oracle oracle .修改操作系统核心参数 在Root用户下执行以下步骤: 1)修改用户的SHELL的限制,修改 ...
- SuperSocket基础二
SuperSocket基础(二)-----一个完整的SocketServer项目 由于时间关系未能及时更新,关于SuperSocket,对于初学者而言,一个SuperSock的Server真的不好写. ...
- redis 分页
redis 分页 > rpush a (integer) > rpush a (integer) > rpush a (integer) > rpush a (integer) ...
- 解析url成对象形式
请编写一个JavaScript函数parseQueryString,他的用途是把URL参数解析为一个对象 var url = "https://www.baidu.com/s?ie=utf- ...
- mysql的sql_mode设置
参考官方文档: mysql可以为不同的客户端设置不同的sql_mode,并且每个应用能够设置他自己的会话级别的sql_mode.sql_mode会影响sql语法以及mysql显示数据的正确性. Whe ...
- 硬件笔记之MacMini开启HiDPI
0x00 概述 先科普一下,有关retina和HiDPI那点事 ,Macmini在2k显示器的显示太小了,看起来费眼,没办法,苹果原生HiDPI是支持4k显示器的,所以以后买显示器,直接买4k的一步到 ...
- 重写用户模型时报错AttributeError: type object ‘自定义类’ has no attribute ‘USERNAME_FIELD’
view中导入:from django.contrib.auth.models import AbstractBaseUser settings.py中设置了:AUTH_USER_MODEL='app ...
- 题解 Luogu P3623 [APIO2008]免费道路
[APIO2008]免费道路 题目描述 新亚(New Asia)王国有 N 个村庄,由 M 条道路连接.其中一些道路是鹅卵石路,而其它道路是水泥路.保持道路免费运行需要一大笔费用,并且看上去 王国不可 ...
- 解决IDEA创建多模块项目找不到创建class类的问题
最近在利用idea创建一个多模块的java项目,但是让人十分抓狂的事,模块竟然找不到创建class类的选项,如图 前提:创建模块后假如右下角出现 务必要点击import Changes .然后看下是否 ...