html可视区高度,你真的懂js获取可视区宽高吗
原生js获取高度不就是就window.innerHeight一句话的事,可是真的这么简单吗
来看个测试页面,如果页面带有横向纵向的滚动条,我们打印出各个高度进行查看对比
顺便你也可以看看document.body和document.documentElement在各个浏览器的差异;document.documentElement返回的是整个文档的根节点即 html 标签;document.body 返回的是DOM对象里的body子节点,即 body 标签
console.log('document.documentElement.clientHeight-' + document.documentElement.clientHeight);
console.log('document.documentElement.scrollHeight-' + document.documentElement.scrollHeight);
console.log('document.documentElement.offsetHeight-' + document.documentElement.offsetHeight);
console.log('document.body.clientHeight-' + document.body.clientHeight);
console.log('document.body.scrollHeight-' + document.body.scrollHeight);
console.log('document.body.offsetHeight-' + document.body.offsetHeight);
console.log('window.innerHeight-' + window.innerHeight);
复制代码
ie8下各个值
ie9下各个值
ie10跟ie9一样不列图了
ie11下各个值
6. 火狐浏览器下各个值
chorme浏览器下各个值
通过以上各图对比不难看出(先排除ie8)
window.innerHeight = document.documentElement.clientHeight + 滚动条高度;
如果没有滚动条则window.innerHeight = document.documentElement.clientHeight
在来说说ie8
ie8比较特殊不支持window.innerHeight并且html还自带有2像素的边框; 可以通过document.documentElement.offsetHeight - 2 * 2得到window.innerHeight的值
所以ie8的window.innerHeight = document.documentElement.offsetHeight - 2 * 2 = document.documentElement.clientHeight + 滚动条高度。
如果没有滚动条window.innerHeight = document.documentElement.offsetHeight - 2 * 2 = document.documentElement.clientHeight
所以获取可视区的高度不是简单的window.innerHeight,真正的可视区高度不应该包括滚动条
/**
* 获取视口宽高 兼容兼容到ie8
* @param {boolean} flag 标识返回的宽高是否包含滚动条
* @return {object} {widht: xxx, height: xxx} 视口宽高
/
function getViewPort (flag) {
if (typeof flag === 'undefined') {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
if (flag === true) {
// ie8 html 有2像素边框 上下, 左右 4像素
return {
width: window.innerWidth || document.documentElement.offsetWidth - 2 * 2,
height: window.innerHeight || document.documentElement.offsetHeight - 2 * 2
};
}
}
复制代码
获取文档的宽高呢
通过以上各图的对比,整个文档的高度,可以通过document.documentElement.scrollHeight来获取各个浏览器都比较一致,你也不必纠结到底是用document.body 还是用document.documentElement; 用clientHeight还是offsetHeight
/**
* 获取文档宽高 兼容兼容到ie8
*
* @return {object} {widht: xxx, height: xxx} 视口宽高
/
function getDocumentPort (flag) {
return {
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
};
}
复制代码
html可视区高度,你真的懂js获取可视区宽高吗相关推荐
- 你真的懂js获取可视区宽高吗
可能你会觉得获取可视区宽高不是很简单吗 原生js获取高度不就是就window.innerHeight一句话的事,可是真的这么简单吗 来看个测试页面,如果页面带有横向纵向的滚动条,我们打印出各个高度进行 ...
- 如何通过JS获取元素宽高
方法一:DOM节点.offsetWidth/offsetHeight 作用:获取到的是内容区域(content) + 内边距(padding) + 边框(border)的值,输出一个数字. <s ...
- 原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
- js获取屏幕宽高和下拉加载更多
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- php获取屏幕的宽高,JS获取屏幕宽高
Javascript:网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document. ...
- JS快速获取图片宽高的方法
JS快速获取图片宽高的方法 快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括I ...
- Android获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏高度的方法汇总
看这个博客你可以知道 获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏(虚拟按键栏)高度的方法 目录顺序为 代码测试的机型 状态栏高度 actionbar高度 屏幕高度 导航 ...
- 微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
- dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
- Android获取View宽高的常见方式
背景 有时我们会有基于这样的需求,当Activity创建时,调用View.getWidth.View.getHeight().View.getMeasuredWidth() .View.getgetM ...
最新文章
- 送书 | 2020年新一天,用这本书开启你的NLP学习之路!
- 抓包工具Charles基本用法
- java webservice报文过长_工作1-5年的Java程序猿到底需要怎样的一个技术栈?
- 安装cv2(opencv-python)遇到的问题
- 显示Intent和隐式Intent
- css中clear的作用是什么?
- vue项目导入外部css样式和js文件
- linux文件夹做链接,linux为什么不能给目录做硬链接
- 建模算法(八)——插值
- 油猴/暴力猴工具换cook脚本
- 如何通过组织管理提升团队战斗力?每个CTO都需要了解的三大支柱
- windows2008 FTP下载“当前的安全设置不允许”的解决方法
- Proofs for Inner Pairing Products and Applications 学习笔记
- 第八届蓝桥杯(国赛)——瓷砖样式
- [vue] transition animate.js
- fedora 14下建立samba服务器
- 笔记本onenote绘画快捷键_onenote快捷键
- 打听nofollow标签能力做好网站seo优化
- eclipse java jde,Eclipse平台入门之一:什么是Eclipse,我们将开始介绍Java 开发环境(JDE)。...
- 机器学习——决策树(decision tree)
热门文章
- wait()、notify()、notifyAll()原理用法详解sleep()与wait()区别
- 基于Netty手写RPC框架
- mybatis-plus更新问题 全量更新、只更新部分属性
- 数据结构之B+树删除详解
- springmvc源码-参数解析
- 这可能是最好的RxJava 2.x 教程(完结版)
- 添加控件并处理事件(纯手写)
- ubuntu 14.04 32bit依赖库解决
- 整合nagios+cacti遇到问题及解决办法
- 各浏览器下图片垂直居中的方法: