元素的属性:client系列,scroll系列,offset系
元素的属性
div.attributes 是所有标签属性构成的数组集合
dir.classList 是所有class名构成的数组集合
在classList的原型链上看一看到从 add()和remover()
1.client 系列
(1)clientWidth/clientHeight 是我们设置的宽和高加上内边距(没有边框)
clientLeft/clientTop 就是我们设置的边框值
(2)offset系列
offsetWidth/offsetHeight 是我们设置的宽高和高加上边框内边距
offsetLeft/offsetTop 是元素外边距距离父级内边距的距离
这个父级由定位position:absolute;
offsetTop 参照物由父级元素身上的position:absolute/finxed决定的;如果父级元素没有就逐层向上查找知道body
offsetParent 返回这个元素的父级元素
3.Scroll系列
scrollWidth/scrollheight 就是我们设置的宽高加上内边距(内容没有溢出的前提下如果超出范围就按照内容而定)
scrollLeft/scrollTop 滚动条卷走的高度和宽度
如果我们设置了小数,都会向上取整
案例分析
offset 往往和我们做的元素的运动有关
1.offsetLeft 必须和position 配合使用往往这个值还必须是absolute。
2.offsetLeft 有初始值 在标准浏览器下是8px 低版本没有
3.
document.body 获取的是文档中body的标签
document。documentElement 获取的是文档的根节点
docuemnt.body.clientWidth
document.docuemntElement.clientWidth
二者获取的width的值不一样差16px ,怎样让他们一样
一个css就搞定了
Ie6不支持document.documentElement,
兼容性写法
Var w=document.documentElement.clientWidth||document.body.clientWidth
获取浏览器可见区的宽度
逻辑运算 || && !
|| 遇到第一个为真就返回
&& 遇到第一个为假就终止,返回false,如果没遇到就返回最后那一个
5&&4&&2&&1 ==》1
5&&0&&3&&0 ==>0
5||2&&3 且的优先级高于或 2&&3=》3 5||3 ==》5
元素的属性:client系列,scroll系列,offset系的更多相关文章
- offset系列,client系列,scroll系列回顾
一 scroll系列属性 ——滚动
- js的client、scroll、offset详解与兼容性
clientWidth:可视区宽说明:样式宽+padding参考:js的client详解 scrollTop : 滚动条滚动距离说明:chrome下他会以为滚动条是文档元素的,所以需要做兼容:var ...
- 一张图介绍 html中offset、client、scroll、offset 、padding、margin 各种属性介绍
- JS---offset系列和scroll系列
元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置) offset系列: offsetLeft:距离左边位置的值 offsetTop:距离上面位置的值 offs ...
- 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 ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- client系列、offset系列、scroll系列
一.client系列 clientWidth/clientHeight 是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值 二.offset ...
随机推荐
- AVPass技术分析:银行劫持类病毒鼻祖BankBot再度来袭,如何绕过谷歌play的杀毒引擎?
背景 近期,一批伪装成flashlight.vides和game的应用,发布在google play官方应用商店.经钱盾反诈实验室研究发现,该批恶意应用属于新型BankBot.Bankbot家族算得上 ...
- C#遍历文件夹下面所有指定格式文件
C#遍历指定文件夹中的所有文件 DirectoryInfo TheFolder=new DirectoryInfo(folderFullName);//遍历文件夹foreach(DirectoryIn ...
- Scala - 快速学习06 - 面向对象
1- 类 1.1- 简介:类.方法及对象 类是用来创建对象的蓝图. Scala文件中包含的多个类之间,都是彼此可见的,不需要声明为public. 创建对象 定义好类以后,就可以使用new关键字来创建对 ...
- Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码
美国时间 09 月 25 日,Oralce 正式发布了 Java 11,这是据 Java 8 以后支持的首个长期版本. 为什么说是长期版本,看下面的官方发布的支持路线图表. 可以看出 Java 8 扩 ...
- golang IO streaming
IO Streaming Streaming IO in Go,引用此文,略有修改 io.Reader和io.Writer io.Reader接口定义了从传输缓存读取数据 type Reader in ...
- java相关知识点
Java基础.语法 1. 简述Java跨平台原理 2. Java的安全性 3. Java三大版本 4. 什么是JVM?什么是JDK? 什么是JRE? 5. Java三种注释类型 6. 8种基本数据类型 ...
- [译]聊聊C#中的泛型的使用(新手勿入)
写在前面 今天忙里偷闲在浏览外文的时候看到一篇讲C#中泛型的使用的文章,因此加上本人的理解以及四级没过的英语水平斗胆给大伙进行了翻译,当然在翻译的过程中发现了一些问题,因此也进行了纠正,当然,原文的地 ...
- 基础编程复习:输出n以内的所有素数
暴力遍历:对于1~n以内的每一数i 每一个i只需要考虑2~i开根号以内是否有可以让i整除的数,即(i%x==0)只要满足就不是素数 否则输出 #include<iostream> #inc ...
- python 备忘
import jsonu='''{ "maps": [ { "id": "blabla", "iscategorical" ...
- 3.Magicodes.NET框架之路——预览(一)
3.Magicodes.NET框架之路——预览(一) 前言 一眨眼,已经过去两个多月了 ,哥已经火力全开了(业余时间和精力,甚至为此放弃了各种私活),所以大家不要抱怨慢哈.编程犹如逆水行舟,不进则退. ...