元素的属性

Div.attributes 是所有标签属性构成的数据集合

Div.classList 是所有class名构成的数组集合

在classList的原型链上看以看到add()和remove()

class的方法:

div.className()方法 删除所有class名 替换一个或多个名字
div.chassList.add()方法 往class里面添加一个名字
div.classList.remove()方法 删除一个class名字

一、client 系列

clientWidth/clientHeight 是我们设置的宽和高+内边距 没有边框
clientLeft/clientTop 就是我们设置的边框值

二、offset 系列

offsetWidth/offsetHeight 是我们设置的宽和高加上 内边距 和 边框
offsetLeft/offsetTop 是元素外边距离副局内边距的距离
↑↑↑参照物由父级身上的position:absolute/fixed决定 如果父级元素没有就逐层查找 直到body
offsetParent 返回这个元素的父级元素
1)offset往往和我们做元素的运动有关
2)offset必须和position使用

三、Scroll系列

scrollWidth/scrollHeight 就是我们设置的宽高加上内边距(内容没有溢出的前提下)

如果超出了范围就按内容而定

scrollTop/scrollLeft   滚动条卷走的高度和宽度

如果我们设置了小数,都会向上取整

四、offset的兼容问题

document.body 获取的是文档中的body标签
document.documentElement 获取的是文档中根节点 就是整个html
document.body.clientWidth
document.documentElementWidth
二者获取的width的值不一样差16px

ie6 不支持document.documentElement
写法:
var w=document.documentElement.clientWidth || document.body.clientWidth
获取浏览器可见区的宽度

案例分析

Offset 往往和我们做元素的运动有关

offset必须和position配合使用往往这个值还必须是absolute。

offsetLeft 有初始值 在标准浏览器下是8px  低版本没有

Document.body 获取的是文档中的body标签

Document.documentElement  获取的是文档中根节点

Document.body.clientWidth

Document.documentElement.clientWidth

二者获取的width的值不一样差16px,怎样让他们一样

一个css就搞定了

从零开始的全栈工程师——js篇2.15(offsetLeft)的更多相关文章

  1. 从零开始的全栈工程师——js篇2.5

    数据类型与全局属性 js的本质就是处理数据 数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt 制定了js的数据类型 一.数据类型 1.基本数据类型 基本数据类型就是简单 ...

  2. 从零开始的全栈工程师——js篇2.1(js开篇)

    JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么?    页 ...

  3. 从零开始的全栈工程师——js篇(闭包)

    闭包是js中的一大特色,也是一大难点.简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量. 闭包的三大特点为: 1.函数嵌套函数 2.内部函数可以访问外部函数的变量 3.参数和变量不会 ...

  4. 从零开始的全栈工程师——js篇(js的异步)

    js中的异步 Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任 ...

  5. 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)

    一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...

  6. 从零开始的全栈工程师——js篇2.20(事件对象 冒泡与捕获)

    一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...

  7. 从零开始的全栈工程师——js篇2.16

    js操作css样式 div.style.width=“200px” 在div标签内我们添加了一个style属性 并设定了width值 这种写法会给标签带来了大量的style属性 跟实际项目是不符的 我 ...

  8. 从零开始的全栈工程师——js篇2.14(表单与计时器)

    一.表单 Form input select textarea type=”radio/checkbox/password/button/text/submit/reset/” 表单的事件 oncha ...

  9. 从零开始的全栈工程师——js篇2.12(面向对象)

    面向对象 Js一开始就是写网页特效,面向过程的,作者发现这样写不好,代码重复利用率太高,计算机内存消耗太大,网页性能很差. 所以作者就收到java和c的影响,往面向对象靠齐.Js天生有一个Object ...

随机推荐

  1. cisco 2901 配置拨号上网

    1.输入en,然后输入密码确认后按conf t2.Router(config)# vpdn enable        interface dialer 1   // 进入拨号器13.Router(c ...

  2. mount/umount文件挂载

    用法: mount [-lhV] mount -a [选项] mount [选项] [--source] <源> | [--target] <目录> mount [选项] &l ...

  3. [cf687c]The Values You Can Make(01背包变形)

    题意:给定n个硬币,每个硬币都有面值,求每个能构成和为k的硬币组合中,任意个数相互求和的总额种类,然后将所有硬币组合中最后得到的结果输出. 解题关键:在01背包的过程中进行dp.dp[i][j]表示组 ...

  4. [cf839d]Winter is here容斥原理

    题意:给定一个数列${a_i}$,若子序列长度为$k$,最大公约数为$gcd$,定义子序列的权值为$k*\gcd (\gcd  > 1)$.求所有子序列的权值和. 答案对10^9+7取模. 解题 ...

  5. linux中历史命令的一点发现

    在LINUX中的终端中输入命令之后,这些命令会被存储到一个文件中,在终端中按下 键盘上的向上的箭头就会显示出以前敲击过的命令,最关键的是重起电脑之后依然有效的,这点和 windows上的CMD有着很大 ...

  6. linux 环境变量恢复默认值

    export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin 在linux命令下如何访问一个ur ...

  7. Linux下ping加上时间戳

    命令(ping10次): ping 192.168.5.160 -c 10 | awk '{ print $0"\t" strftime("%H:%M:%S", ...

  8. Flask 入门(第三篇)

    1. 安装虚拟环境 安装虚拟环境: $ sudo pip install virtualenv $ sudo pip install virtualenvwrapper virtualenv --ve ...

  9. Haproxy+Keepalived高可用配置

    基本实验 参考文档 博文地址 环境拓扑 下面使我们要实现的负载均衡集群图示 主节点地址: 92.0.0.11 从节点地址: 92.0.0.12 共享虚拟地址:92.0.0.8 下面是负载均衡集群可能出 ...

  10. PM2使用文档

    简介 PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控.自动重启.负载均衡等,而且使用非常简单. 下面就对PM2进行入门性的介绍,基本涵盖了PM2的常用的功能和 ...