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标准 ...
随机推荐
- android 项目集成 微信支付
0.环境 下载 libammsdk.jar 1.需要的常量值 public class Constant { /** 微信中用到的常量值 */ public static final class WX ...
- ROUTE: route addition failed
ROUTE: route addition failed 1)报FlushIpNetTable failed on interface错误 应对:以管理员身份运行OpenV-P-N 2)报Warnin ...
- centos 随机启动脚本编写
先说下问题背景 目前手上开发的产品是springboot微服务的,我们用jenkins来做的部署,部署脚本如下: 1.build脚本 负责从git服务器拉脚本 2.微服务脚本: #!/bin/shap ...
- 0.a开始数据结构征程
决定开始从mooc和ppt上学习数据结构,......书暂时不看.在进入数据结构之前,我首先将自己以一个还未进入大山但又向往山中美景的探险者身份对数据结构的几点疑问的答案的寻找和思考写在下面. 什么是 ...
- 基于【 Docker】三 || Docker的基本操作
一.Docker常用命令 1.搜索镜像:docker search 镜像名称 2.下载镜像:docker pull 镜像名称:版本号 3.查看镜像:docker images 4.删除镜像:docke ...
- php定界符介绍
php界定符就是为了照样输出内容.它的格式如下: <<<EOF ...... EOF; 其中EOF是自定义的变量,但要成对出现! 首先附上一段php代码: <?php $a = ...
- 字符串slice、substring、substr
1.slice() 可以为负数,如果起始位置为负数,则从字符串最后一位向前找对应位数并且向后取结束位置,如果为正整数则从前往后取起始位置到结束位置. 2.substring() 只能非负整数,截取起始 ...
- 用jq动态给导航菜单添加active
点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...
- 为什么加了jquery mobile 会有 Loading 字样在页面底部？【已解决】
这是一个奇怪的问题,用了jquery mobile js库,页面底部就会出现Loading字样, 解决办法如下: 1,正常加上css样式 2,一定要在jquery mobile js库加载之前,设置 ...
- 关于NavigationBar的笔记
1常用几个方法 全局 //设置navigationBar 的类型 ,ps: status bar的状态受navigationbar控制(当用navigationcontroller时,通过设置此属性改 ...