offset、client、scroll、screen的自己理解
body是DOM对象里的body子节点,即 <body> 标签;
documentElement 是整个节点树的根节点root,即<html> 标签;
window.screen.width、window.screen.height、screen.width、screen.height分别表示显示屏幕的宽高,即屏幕的分辨率。
window.innerHeight、window.innerWidth分别表示浏览器展示页面内容可见的高度和宽度。
window.outerHeight、window.outerWidth分别表示浏览器的高度和宽度,包括收藏栏等等这些的宽度和高度。
client
document.documentElement.clientWidth:浏览器上网页可见内容的宽度。
document.documentElement.clientHeight:浏览器上网页可见内容的高度。
document.body.clientWidth:body宽度。
document.body.clientHeight:body宽度。
element.clientWidth = 左侧内边距+内容宽度+右侧内边距。
element.clientHeight = 上侧内边距+内容高度+下侧内边距。
Offset
document.documentElement.offsetWidth:表示html的宽度,不包括html的margin和border宽度。
document.documentElement.offsetHeight:表示html的高度,不包括html的margin和border宽度。
document.body.offsetWidth:表示body的宽度,不包括body的margin和border宽度。
document.body.offsetHeight:表示body的高度,不包括body的margin和border宽度。
element.offsetWidth = 左侧边框宽度+左侧内边距+内容宽度+右侧内边距+右侧边框宽度。
element.offsetHeight = 上侧边框宽度+上侧内边距+内容高度+下侧内边距+下侧边框宽度。
offsetParent 返回这个元素的父级元素
scroll
document.documentElement.scrollWidth:表示浏览器页面宽度,有滚动条是包括滚动条后面的
document.documentElement.scrollHeight:表示浏览器页面高度,有滚动条是包括滚动条后面的
document.documentElement.scrollTop:表示垂直方向滚动条滚动过的距离
document.documentElement.scrollLeft:表示水平方向滚动条滚动过的距离
if (window.pageXOffset !== undefined) {
// 所有浏览器,除了 IE9 及更早版本
alert("水平滚动距离: " + window.pageXOffset);
alert("垂直滚动距离: " + window.pageYOffset);
} else {
// IE9 及更早版本
alert("水平滚动距离: " + document.documentElement.scrollLeft);
alert("垂直滚动距离: " + document.documentElement.scrollTop);
}
document.body.scrollWidth:当html、body没有marign、border、padding时等于 document.documentElement.scrollWidth
document.body.scrollHeight:当html、body没有marign、border、padding时等于 document.documentElement.scrollHeight
element.scrollWidth = 左侧内边距+内容宽度+右侧内边距。
element.scrollHeight = 上侧内边距+内容高度+下侧内边距。
element.scrollLeft :当父元素宽度小于子元素宽度时,且存在滚动条时,获取父元素上的scrollLeft的滚动条滚动过的距离。
element.scrollTop :当父元素高度小于子元素高度时,且存在滚动条时,获取父元素上的scrollTop的滚动条滚动过的距离。
offset、client、scroll、screen的自己理解的更多相关文章
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- js中 offset /client /scroll总结
offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...
- js 元素offset,client , scroll 三大系列总结
1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...
- offset client scroll
offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...
- bom中的offset,client,scroll
简单明了
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
随机推荐
- 字符串的查找删除---C++中string.find()函数与string::npos
给定一个短字符串(不含空格),再给定若干字符串,在这些字符串中删除所含有的短字符串 输入: 输入只有一组数据 输入一个短字符串(不含空格),再输入若干字符串直到文件结束为止 输出: 删除输入的短字符串 ...
- 第06章-渲染Web视图
1. 理解视图解析 将控制器中请求处理的逻辑和视图中的渲染实现解耦是Spring MVC的一个重要特性.如果控制器中的方法直接负责产生HTML的话,就很难在不影响请求处理逻辑的前提下,维护和更新视图. ...
- 学习如何用VS2010创建ocx控件
1参考文章 (1)这一篇将使用vc创建ocx控件:http://blog.csdn.net/jiadelin/article/details/2917225 (2)这一篇文章有关vs2010创建act ...
- TypedValue.applyDimension的使用
TypedValue.applyDimension是一个将各种单位的值转换为像素的方法 用法TypedValue.applyDimension(int unit, float value,Displa ...
- 在云主机后台进行python程序运行
nohup python main.py & nohup liunx自带的命令 注意:后面(&)!
- 「POJ 1741」Tree
题面: Tree Give a tree with n vertices,each edge has a length(positive integer less than 1001). Define ...
- Tensorflow报错:InvalidArgumentError: You must feed a value for placeholder tensor 'input_y' with dtype
此错误神奇之处是每次第一次运行不会报错,第二次.第三次第四次....就都报错了.关掉重启,又不报错了,运行完再运行一次立马报错!搞笑! 折磨了我半天,终于被我给解决了! 问题解决来源于这边博客:htt ...
- 杨辉三角的Python实现
杨辉三角的Python实现 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 Python生成器实现杨辉三角: # python def yanghui_tr ...
- javascript常用函数(find、filter、map)
1.find 查询数组中符合条件的第一个元素,如果没有符合条件的元素则返回空数组var arr = [1,2,3,4,5,6,7];var dogs=arr.find(v=>v===4);结果: ...
- Java FileInputStream与FileReader的区别
在解释Java中FileInputStream和FileReader的具体区别之前,我想讲述一下Java中InputStream和Reader的根本差异,以及分别什么时候使用InputStream和R ...