clientHeight / scrollHeight / offsetHeight 等属性的区别图
网页(内容)可见区域宽:document.body.clientWidth
网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
clientHeight / scrollHeight / offsetHeight 等属性的区别图的更多相关文章
- clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
- clientHeight scrollHeight offsetHeight
<div style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的di ...
- clientHeight—scrollHeight—offsetHeight三者的区别
clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...
- offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解
el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...
- clientHeight , scrollHeight , offsetHeight之间的区别
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
随机推荐
- centos7 安装KDE
下载安装了centos7 64位系统之后.初始化安装的是GNOME桌面系统.因为是按照鸟哥的Linux在学习,所以需要安装kde. 首先需要root权限. 打开终端. 输入su root密码.进入ro ...
- python的一个简单日志记录库glog的使用
一. glog的简介 glog所记录的日志信息总是记录到标准的stderr中,即控制台终端. 每一行日志记录总是会添加一个谷歌风格的前缀,即google-style log prefix, 它的形式如 ...
- 使用osgearth2.9 rex引擎在Qt中黑屏的问题修复
将osgUtil::RenderStage.cpp中的下列红色代码注释重新编译即可: if ( !colorAttached ) { setDrawBuffer( GL_NONE, true ); s ...
- linux安装MySQL-5.6.22-1.el6.i686.rpm-bundle.tar
1.首先搜索系统有没有安装过mysql,使用命令 rpm -qa|grep mysql 有的话先卸载 rpm -e --nodeps + mysql应用名字\ 2.在/usr/local下创建mys ...
- ThinkPHP框架数组定义
PHP数组定义 ThinkPHP框架中所有配置文件的定义格式均采用返回PHP数组的方式,格式为: //项目配置文件 return array( 'DEFAULT_MODULE' => 'Inde ...
- BZOJ 3626: [LNOI2014]LCA(树剖+差分+线段树)
传送门 解题思路 比较有意思的一道题.首先要把求\(\sum\limits_{i=l}^r dep[lca(i,z)]\)这个公式变一下.就是考虑每一个点的贡献,做出贡献的点一定在\(z\)到根节点的 ...
- NX二次开发-UFUN获取球的参数UF_MODL_ask_sphere_parms
NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize( ...
- 如何理解Vue的render函数
第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> < ...
- Unity中的值传递与引用传递
1. 值类型 值类型变量本身保存了该类型的全部数据,当声明一个值类型的变量时,该变量会被分配到栈(Stack)上. 2. 引用类型 引用类型变量本身保存的是位于堆(Heap)上的该类型的实例的内存地址 ...
- hdu多校第八场 1011 (hdu6667) Roundgod and Milk Tea 二分图匹配
题意: 有若干个班,每个班有些人要喝奶茶,也提供一些奶茶,一人喝一杯,但是自己班的人不能喝自己班的奶茶,求最多能有多少人喝上奶茶. 题解: 典型的二分图匹配问题,学生在左,奶茶在右,学生和非自己班的奶 ...