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 ...
随机推荐
- leetcode 最大不重复字符
class Solution: def lengthOfLongestSubstring(self, s: str) -> int: if len(s) <= 1: return len( ...
- IIS7如何实现访问HTTP跳转到HTTPS访问
感谢原文作者,为方便后期查阅转载,原文链接:https://www.cnblogs.com/xiefengdaxia123/p/8542737.html 通常情况下我们是用的都是http的路径,对于h ...
- log4j 配置日志输出(log4j.properties)
轉: https://blog.csdn.net/qq_29166327/article/details/80467593 一.入门log4j实例 1.1 下载解压log4j.jar(地址:http: ...
- docker环境下solrcloud+zookeeper集群部署教程
前言:两个月前的16年11月份完成的配置,使用的solr6.1和zookeeper3.4,刚刚写成blog,目前版本可能有小版本的变化. 本例完成结果为:在docker环境下部署solrcloud集群 ...
- hbase-连接流程
root和meta表 在版本0.9.8之前,存在root表,之后的版本中去除了root表,meta表主要记录了每个表在region的分布情况. meta结构 从表格中可以看出,rowkey格式:tab ...
- EL表达式、JSTL标签库
一.EL(Expression Language)表达式 语法结构:${var} 若要停用对EL表达式的评估的话,需要使用page指令将isELIgnored属性值设为true: <%@ pag ...
- 探究osg中的程序设计模式【目录】
前序 探究osg中的程序设计模式---开篇 探究osg中的程序设计模式---创造性模式 探究osg中的程序设计模式---创造型模式---Factory(工厂)模式 探究osg中的程序设计模式---创造 ...
- 关于Https
http://blog.csdn.net/wfdtxz/article/details/8678982 https://www.tuicool.com/articles/feYfE3I https:/ ...
- win10jdk环境变量配置问题:'javac' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
在编译时报错:'javac' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 原因1:配置Path的时候使用%JAVA_HOME%相对路径配置. 解决:把Path路径改为绝对路径(例:D:\P ...
- gambit软件license文件
最近自己的gambit软件license文件已经到期,后面采用fluent的license文件后,可以使用,但不能导入文件.不过通过努力,终于找到了可以实现导入文件的代码,并且可以实现无限期的使用fl ...