offset系列、scroll系列与client系列
- offset系列:
- offsetLeft:获取元素距离最左边的距离,自身的margin包括在内,不包括自身的border
- offsetTop:获取元素距离最上边的距离,自身的margin包括在内,不包括自身的border
- offsetWidth:获取元素的宽度,包括border及以内,不包括margin
- offsetHeight:获取元素的高度,包括border及以内,不包括margin
- offsetParent:获取元素的定位父级元素:
- 如果元素fixed定位,得到null;
- 元素没有fixed情况下如果元素所有的父级元素都没定位,得到body;
- 元素没有fixed情况下,父级元素有定位,得到离他最近的有定位的父级元素
- scroll系列
- scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度,当滚动条向下拉时,内容往上走,获得的就是上面跑出盒子范围的那部分高度。滚动条向右拉同理
- scrollWidth和scrollHeight:获得元素的实际宽度和高度,在内容没有超出盒子时,获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时,获得的高度和宽度不包括滚动条。
- var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
根据浏览器兼容性,scroll系列需要写出兼容代码:例如scrollTop:
- client系列
- clientTop和clientLeft:获得上边框和左边框的宽度。
- clientWidth和clientHeight:获取可视范围的宽度高度,即边框内部的,不包括border,包括padding.当盒子内部存在滚动条时,获得的高度和宽度不包括滚动条。
offset系列、scroll系列与client系列的更多相关文章
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- 差别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 ...
- offset系列,client系列,scroll系列回顾
一 scroll系列属性 ——滚动
- 元素的属性:client系列,scroll系列,offset系
元素的属性 div.attributes 是所有标签属性构成的数组集合 dir.classList 是所有class名构成的数组集合 在classList的原型链上看一看到从 add()和remove ...
- 前端 ---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系列
一.client系列 clientWidth/clientHeight 是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值 二.offset ...
随机推荐
- MySQL8.0.15安装教程(Windows)
下载 第一步 去官网下载社区版本(GPL版本) 第二步 不登录,直接选下方的跳过 下载解压后 配置系统环境变量 复制解压后的mysql到C盘或者其他磁盘下 我们去系统的环境变量的path里添加一个my ...
- FormsAuthentication 票据前后台登录导致掉线
一.前后台的用户信息都是采用.NET自带的FormsAuthentication 的ticket存取用户信息, 但是如果前后台用相同的用户使用票据这个会导致一方登陆后另一方会掉线,需要重新登陆. 二. ...
- pwnable.kr-leg-witeup
做过后其实知道,是很简单的一段代码,也很容易看懂,看懂后计算key1.key2.key3之和即可. main 汇编: 嗯,看来keyx的返回值是r0了,详细分析r0值. key1: 在arm状态下,r ...
- 20175126《Java程序设计》第三学习总结
# 20175126 2016-2017-2 <Java程序设计>第三周学习总结 ##课余收获——利用JAVA编写最简单的斗地主程序 -由于最近身边的朋友都在玩手机上的斗地主小游戏,我也就 ...
- scrapy meta信息丢失
在做58同城爬二手房时,由于房产详情页内对价格进行了转码处理,所以只能从获取详情页url时同时获取该url对应房产的价格,并通过meta传递给下回调函数 现在问题是,在回调函数中找不到原函数meta信 ...
- 记录Queue插入的时候报错
Queue 队列 特性 先进先出 和栈 Stack 非常相似 不过 栈 遵循 后进先出 Queue 和Stack 都存在数据并发的 问题 public static Queue<P ...
- python day03_ 文件处理
一.文件操作的基本流程 计算机操作文件的过程 #1. 打开文件,得到文件句柄并赋值给一个变量 #2. 通过句柄对文件进行操作 #3. 关闭文件 1.文件的打开过程 # f被程序持有,文件被操作系统持有 ...
- css3(display)
实现下拉 <!DOCTYPE html><html><head> <meta charset="utf-8"> <style ...
- 25. pt-slave-restart
pt-slave-restart -h 192.168.100.103 -P 3306 -u admin -p admin \--error-numbers 1032 set global slave ...
- 图解Go select语句原理
Go 的select语句是一种仅能用于channl发送和接收消息的专用语句,此语句运行期间是阻塞的:当select中没有case语句的时候,会阻塞当前的groutine.所以,有人也会说select是 ...