window.innerHeight与document.documentElement.clientHeight与document.body.clientHeight区别
window.innerHeight属于BOM（浏览器对象模型）,获取的高度包含横向滚动条
document.documentElement.clientHeight属于文档对象模型,不包含横向滚动条
document.body.clientHeight属于文档对象模型,body高度，如果设置body height=100%，document.documentElement.clientHeight=document.body.clientHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin: ;
padding: ;
height: %;
width: %;
}
.box{
height: %;
width: %;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
console.log('innerHeight:'+ window.innerHeight)
console.log('documentElement.clientHeight:'+ document.documentElement.clientHeight)
console.log('body.clientHeight:'+ document.body.clientHeight)
</script> </body>
</html>
window.innerHeight与document.documentElement.clientHeight与document.body.clientHeight区别的更多相关文章
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- document.body、document.documentElement和window获取视窗大小的差别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- document.body.clientHeight与document.documentElement.clientHeight
当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- document.documentElement和document.body 与document.compatMode的关系
首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- document.documentElement.clientWidth
document.documentElement.clientWidth 摘自:http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏 ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
随机推荐
- C#如何调用C++(基础篇)
闲暇之余,记一下笔记!记录一下c#如何调用C++的动态库(dll). 步骤: 一.创建一个C++类,例如: AddOperate.h extern _declspec(dllexport) int S ...
- Linux 数据库MySql 安装配置教程！
本文价绍Linux 相关mysql 安装和配置以及基本连接测试 1官网下载安装mysql-server # wget http://dev.mysql.com/get/mysql-community- ...
- centos源码安装nginx
1.安装依赖 nginx对以下工具包有依赖,我们可以一键安装,命令: yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-dev ...
- js实现千位分隔符
var s=123456789; var seperate=s.toString().replace(/\B(?=(\d{3})+$)/g,',');
- TSec《mysql client attack chain》
从这个议题学到挺多,攻击手法的串联. 1.mysql Client Attack 这个攻击手法去年就爆出来了,本质就是mysql协议问题,在5步篡改读取客户端内容,导致任意文件读取,如下图所示. 修改 ...
- [LeetCode] 206. Reverse Linked List ☆(反转链表)
Reverse Linked List 描述 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3-> ...
- redis集群安装2
概要:本文主要介绍如何在Centos7中单机搭建redis集群三主三从,按照本文绝对可以实现该需求,至于先搭建单机版主要为了方便理解redis集群,为下一步开发或生产上redis集群做铺垫.同时本 ...
- 转：applicationContext.xml文件放置位置不同而导致的jUnit测试的时候路径的不同
如果applicationContext.xml文件放置在src下面的的时候使用jUint测试的时候编写的路径应该是这样的: @Test public void saveTest() { Applic ...
- Visual Studio 2017使用
常用快捷方式 Ctrl + KK插入书签 取消书签Ctrl + KP 上一个书签Ctrl + KN 下一个数千Ctrl + F3 先一个关键词Shift + F3 上一个关键词 Ctrl + KC 添 ...
- C++——namespace
scope和namespace scope就是我们常说的作用域,namespace是C++引入的一个关键字.这两种都和作用域有些微妙的联系,下面 引自Global scope vs global na ...