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 ...
随机推荐
- Uncaught TypeError: form.attr is not a function 解决办法
前端form表单提交时遇到个问题,一直报错如下 首先说结论:form是个js对象,不是jQuery对象,不能用jquery对象的方法. 代码是: $(document).ready(function( ...
- Mac终端中输入ps aux显示全部进程
ps命令是Process Status的缩写. ps aux命令用来列出系统中当前运行的那些进程. ps aux | grep chrome 表示查询关于chrome的所有程序(grep可作为文件内的 ...
- 跨DB Server创建View
exec sp_configure 'show advanced options',1reconfigureexec sp_configure 'Ad Hoc Distributed Queries' ...
- @ManyToMany的学习
新建了一个manyToMany的学生-课程表,学生可以选择多个课程,多个课程可以被学生选.尝试如下代码,创建了两个list,然后新建对象,加入list,然后set<list>,报错,这是因 ...
- .Net圈子里的一些看法
金三银四招聘季,不一定一定要跳巢,但是出去看看行情还是有必要的,所以就有这篇随笔. 首先,这里说的.Net圈子是只两个方面 第一,技术人才,属于人的圈子 第二,技术本身,技术的圈子,也就是技术所涵盖的 ...
- JavaSE基础知识(5)—面向对象(5.4面向对象三大特征:封装、继承、多态)
面向对象编程具有三大特征: 封装 继承 多态 一.封装 1.好处 狭义的封装:也就是属性的封装,避免了任意赋值的危险,提高了数据的安全性! ①隐藏一个类中不需要对外提供的实现细节 ②使用者只能通过实现 ...
- github 生成配置ssh 秘钥方法详解
如果安装github成功后,当从本地提交文件到github的时候,提交不成功,报错,可能问题就是你还没有生成ssh秘钥 1.当你提交文件到github,不成功,出现如下的情况,就代表着github上面 ...
- 旅游类的APP原型模板分享——Priceline
Priceline是一款旅游服务的APP应用.功能有查找预订酒店.车票.机票等服务. 本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供. 先简单看看动图: 点击这里,可 ...
- RF自动化测试
1.自动化分层:UI层实现界面自动化,Service层实现接口自动化,Unit层实现单元测试. 2.UI自动化测试常见的工具有:QTP,AutoIt,Selenium.Selenium是做Web测试最 ...
- ibatis中的resultMap
优点: resultMap可以实现一种功能 当你是1对多 这种多张表查询的时候 你没办法 通过表连接来实现一个集合设置到一个实例里,但是通过resultMap里可以做到 根据关联的字段 查询到一个集合 ...