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 ...
随机推荐
- Linux (raspberry) 安装 telnet server
可能由于内核或者版本问题 ,网上的telnet服务器安装教程,总是无法安装成功 ,下面说说基于debian发行版(树莓派)telnet 服务器端的安装,便于以后的远程访问. 具体可以通过netstat ...
- 加载ubuntu的时候卡在‘SMBus Host Controller not enabled'错误
实验系统:ubuntu-16.04.6-server-amd64 我在VMware安装完这个系统后进入发现卡在了’SMBus Host Controller not enabled‘里,后来查过网络发 ...
- python redis 批量设置过期key
在使用 Redis.Codis 时,我们经常需要做一些批量操作,通过连接数据库批量对 key 进行操作: 关于未过期: 1.常有大批量的key未设置过期,导致内存一直暴增 2.rd需求 扫描出这些ke ...
- springboot java.util.NoSuchElementException: No value present 异常处理
使用jpa查询的时候,如果查询不到数据,就会返回这个错误,下面是处理方法. @Override public User findByEmail(String email) { User user = ...
- 关于a标签的href属性值的区别
一.href="javacript:;" 这种用法不正确,这么用的话会出现浏览器访问“javascript:;”这个地址的现象: 二.href="javacript:v ...
- leetcode-回溯③
题77 回溯: class Solution: def combine(self, n: int, k: int) -> List[List[int]]: res = [] def backtr ...
- CSP-S2019旅游记
CSP-S2019 你问我为什么写旅游记? 因为好像除了旅游我今年啥都没干 Day0 校内模拟一直被吊锤,考前几场几乎要爆零 这提莫就不是什么好兆头 在家二刷水淹东京完回学校,带了一大堆家当上车 去广 ...
- 【NIO】NIO之浅谈内存映射文件原理与DirectMemory
Java类库中的NIO包相对于IO 包来说有一个新功能是内存映射文件,日常编程中并不是经常用到,但是在处理大文件时是比较理想的提高效率的手段.本文我主要想结合操作系统中(OS)相关方面的知识介绍一下原 ...
- Python3 测试报告BeautifulReport中添加截图
在测试类中,添加save_img方法,在测试过程中出现错误时,自动截图并返回失败 默认存放的图片路径是img def save_img(self, img_name): ""&qu ...
- QueryList 内容过滤
<?php require 'vendor/autoload.php'; use QL\QueryList; $html =<<<STR <div id="de ...