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标准 ...
随机推荐
- requests Use body.encode('utf-8') if you want to send it encoded in UTF-8
基本环境 使用 requests 模块发送 post 请求,请求体包含中文报错 系统环境:centos7.3 python版本:python3.6.8 请求代码: // 得到中文 param_json ...
- Docker启动Elasticsearch报错java.nio.file.AccessDeniedException
报错信息 Caused by: java.nio.file.AccessDeniedException: /usr/share/elasticsearch/data/nodes 问题分析 表面上是说容 ...
- JavaScript--Function对象（函数)的声明和作用域
Funtion 封装了可重复使用的代码块对象,函数名是一个引用函数对象的变量 声明提前:在程序开始执行之前,将var 变量和function函数提前声明 但赋值并不会提前 它的三种创建方法: 创建1 ...
- Java Socket编程----网络基础
详见:https://www.cnblogs.com/rocomp/p/4790340.html Java最初是作为网络编程语言出现的,其对网络提供了高度的支持,使得客户端和服务器的沟通变成了现实,而 ...
- OSI七层与TCP/IP五层
OSI七层与TCP/IP五层网络架构详解 OSI和TCP/IP是很基础但又非常重要的网络基础知识,理解得透彻对运维工程师来说非常有帮助.今天偶又复习了一下: (1)OSI七层模型 OSI中的层 功能 ...
- Octave基本语法
基本运算 octave:3> 5+6 ans = 11 octave:4> 3-2 ans = 1 octave:5> 8*9 ans = 72 octave:6> 8/4 a ...
- sklearn线性回归实现房价预测模型
目录 题目要求 单特征线性回归 方案一 方案二 多特征线性回归 两份数据 ex1data1.txt ex1data2.txt 题目要求 建立房价预测模型:利用ex1data1.txt(单特征)和ex1 ...
- goroutine 修改全局变量无效问题
原文:https://studygolang.com/topics/7050 go修改全局变量的问题 测试 goroutine 修改全局变量,有x y 两个全局函数,分别在两个 goroutine f ...
- 大数据之路week04--day06（I/O流阶段一 之异常）
从这节开始,进入对I/O流的系统学习,I/O流在往后大数据的学习道路上尤为重要!!!极为重要,必须要提起重视,它与集合,多线程,网络编程,可以说在往后学习或者是工作上,起到一个基石的作用,没了地基,房 ...
- 前端与SQL
转载自:http://developer.51cto.com/art/201706/542163.htm