client系列、offset系列、scroll系列
一、client系列
clientWidth/clientHeight 是我们设置的宽和高加上内边距(没有边框)
clientLeft/clientTop 就是我们设置的边框值
二、offset系列
offsetWidth/offsetHeight 是我们设置的宽和高加上内边距,加上边框
offsetLeft/offsetTop 是元素外边距离父级内边距相对于父级,这个父级由定位position:absolute;
offsetParent 返回这个元素的父级元素
offsetTop 参照由父级身上的position:absolute/fixed,如果父级元素身上没有就逐层向上查找,直到body
offset往往和我们做元素的运动有关;
注意:1、offset必须和position配合使用,往往这个值还必须是absolute;
2、offset由初始值,在标准浏览器下是8,低版本是0;
3、 var t=setInterval (function()){
aa . style . left=+"px"
}
三、scroll系列
scrollWidth/scrollHeight 就是我们设置的宽和高加内边距(内容没有溢出的前提,如果超出了范围就按内容而定)
scrollLeft/scrollTop 滚动条卷走的高度
四、
获取浏览器的body的属性是有兼容的
var dd=document . body || document . documentElement;
获取body的整个文档的高
document . scrollHeight || document . documentElement . scrollHeight;
获取屏幕的高(浏览器的可视区)
document . body || document . documentElement . clientHeight
client系列、offset系列、scroll系列的更多相关文章
- 前端 ---client、offset、scroll系列
client.offset.scroll系列 1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 4.client、offset、scroll系列
client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...
- 差别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...
- 区别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...
- client、offset、scroll系列
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- 16-client、offset、scroll系列
1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 16-----client、offset、scroll 系列
1.client 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 20190430-screen、client、offset、scroll等JS中各种宽度距离
参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
随机推荐
- 数据库连接池-配置 wallfilter
使用缺省配置的WallFilter <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSou ...
- Centos7.2——自定义系统服务
前言 顾明思议,自己创建系统服务,在上一篇博文中写道了,这里就详细写下~ 步骤 我是一段美丽的用户分割的废话~ 进入到系统服务目录 ··· cd /lib/systemd/system ··· 创建服 ...
- 开发工具、Object类(java基础知识十一)
1.常见开发工具介绍 * A:操作系统自带的记事本软件 * B:高级记事本软件 * C:集成开发环境 IDE * (Integrated Development Environment) * ...
- Objective-C 中Socket常用转换机制(NSData,NSString,int,Uint8,Uint16,Uint32,byte[])
最近项目中要用到socket通讯,由于涉及到组包问题,所以需要数据类型之间的来回转换,现在分享出来 如果想要请教Socket的问题请留言,我会随时回答的 1. int类型转16进制hexstring ...
- HTTPS站点搭建教程:Win7/Windows Server 2008R2
本文将由笔者为各位读者介绍在win7/windows server 2008R2环境下使用SSL加密协议建立WWW站点的全过程:https SSL证书安装的搭建以及本地测试环境. 要想成功架设SSL安 ...
- Java中文&编码问题小结
转自:http://www.blogjava.net/zhugf000/archive/2005/10/09/15068.html Java字符编码转换过程说明 常见问题 JVM JVM启动后,JVM ...
- ios 给移动的控件添加点击事件
前言: 给一个UIView做移动动画,虽然看起来frame在持续改变,但是它的frame已经是最终值了. 也就是说表面看到的动画都是假象,它的真实位置已经是固定的了.所以只有点击在他的真实frame范 ...
- MyBatis相关资源
MyBatis很多项目中有用到,但会用并不表示你真正理解它,更不代表你能很清楚的教会别人.如果想在会用它的基础上更深入的通过学习它而提升自己技术能力,可利用下面资源. 1.官网文档,基本概念讲的很清楚 ...
- 洛谷 P3957 跳房子 —— 二分答案+单调队列优化DP
题目:https://www.luogu.org/problemnew/show/P3957 先二分一个 g,然后判断: 由于转移的范围是一个区间,也就是滑动窗口,所以单调队列优化: 可以先令队尾为 ...
- JAVA Synchronized (一)
<编程思想之多线程与多进程(1)——以操作系统的角度述说线程与进程>一文详细讲述了线程.进程的关系及在操作系统中的表现,这是多线程学习必须了解的基础.本文将接着讲一下Java线程同步中的一 ...