元素的属性

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系的更多相关文章

  1. offset系列,client系列,scroll系列回顾

    一 scroll系列属性      ——滚动

  2. js的client、scroll、offset详解与兼容性

    clientWidth:可视区宽说明:样式宽+padding参考:js的client详解 scrollTop : 滚动条滚动距离说明:chrome下他会以为滚动条是文档元素的,所以需要做兼容:var ...

  3. 一张图介绍 html中offset、client、scroll、offset 、padding、margin 各种属性介绍

  4. JS---offset系列和scroll系列

    元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置)   offset系列: offsetLeft:距离左边位置的值 offsetTop:距离上面位置的值 offs ...

  5. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  6. 差别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...

  7. 区别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...

  8. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  9. client系列、offset系列、scroll系列

    一.client系列 clientWidth/clientHeight    是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值 二.offset ...

随机推荐

  1. 传统asp.net小心 async/await坑

    最近在改老项目时,干了一件自以为很有成就感的事,心想 “项目都是同步方法,为啥不用异步方法呢?”,于是有了异步方法,类型下面的代码(当然是举例子说明啊) //更新某人名下公司名称 public Tas ...

  2. webpack之牛刀小试 打包并压缩html、js

    1.创建项目文件夹test,在文件夹下创建src文件夹用来存放源码,在src文件夹下创建index.html/index.js两件文件. 我们的最终目的是将这两个文件打包压缩并输出到/test/dis ...

  3. 如何在Linux(Ubuntu)上安装Redmine

    费话就不多说了,本文主要描述如何在如何在Linux(Ubuntu)上安装Redmine.通过这篇文章你将了解如下内容. TL;DR 在Linux(Ubuntu)上安装Redmine的基本流程 配置ph ...

  4. Linux pwn入门教程(10)——针对函数重定位流程的几种攻击

    作者:Tangerine@SAINTSEC 本系列的最后一篇 感谢各位看客的支持 感谢原作者的付出一直以来都有读者向笔者咨询教程系列问题,奈何该系列并非笔者所写[笔者仅为代发]且笔者功底薄弱,故无法解 ...

  5. 吴恩达机器学习笔记26-样本和直观理解1(Examples and Intuitions I)

    从本质上讲,神经网络能够通过学习得出其自身的一系列特征.在普通的逻辑回归中,我们被限制为使用数据中的原始特征

  6. CentOS7编译安装MySQL5.7.24

    目录 安装依赖 安装boost 编译安装MySQL 配置 登录MySQL,修改密码 安装依赖 (1)cmake是新版MySQL的编译工具 sudo yum install gcc gcc-c++ pc ...

  7. Day5:html和css

    Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...

  8. mongoose的save无效的问题

    概述 今天朋友遇到了使用mongoose中的save无效的问题,我通过查找资料帮他解决了,把心得记录下来,供以后开发时参考,相信对其他人也有用. 参考资料: Mongoose学习参考文档--基础篇 M ...

  9. php--include 、require

    一.include .require 定义:包含并运行指定文件 问题:查询了这两个语言结构的资料,有人说,什么require  先执行,什么include后执行. 思考:我觉得官方文档已经解释的很清楚 ...

  10. 动态dp初探

    动态dp初探 动态区间最大子段和问题 给出长度为\(n\)的序列和\(m\)次操作,每次修改一个元素的值或查询区间的最大字段和(SP1714 GSS3). 设\(f[i]\)为以下标\(i\)结尾的最 ...