元素的属性

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

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

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

  1.client系列

   (1) 

  clientWidth/clientHeight 是我们设置的宽和高加上内边距(没有边框)

  clientLeft/clientTop 就是我们设置的边框值

  2.Offset系列

  

  offsetWidth/offsetHeight 是我们设置的宽和高加上边框加上内边距

  offsetLeft/offsetTop 是元素外边距离父级的内边距的距离

  这个父级由定位position:absolute;

  offsetTop 参照物由父级元素身上的position:absolute/fixed决定的;如果父级元素

没有就逐层向上查找直到body。

  offsetParent  返回这个元素的父级元素

  3.Scroll系列

  

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

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

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

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

案例分析

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

  1. offset必须和position配合使用往往这个值还必须是absolute。
  2. offsetLeft 有初始值 在标准浏览器下是8px  低版本没有。

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

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

document.body.clientWidth

document.documentElement.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

JS(JavaScript)的进一步了解6(更新中···)的更多相关文章

  1. 百度前端学院js课堂作业合集+分析(更新中...)

    第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. JS基础知识再整理..........不断更新中

    1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...

  3. JS - 二叉树算法实现与遍历 (更新中...)

    一.关于二叉树: 截图来自:https://segmentfault.com/a/1190000000740261 温馨提示:学习以及使用二叉树概念,心中永远有这么一个图,对于理解和接受二叉树有很大的 ...

  4. html的进一步了解(更新中···)

    (接上一次) 属性:表示事物的一些特征 属性又可分为两种: 标签属性和样式属性 两者的区别: 位置不一样 样式属性写在style中 标签属性写在标签内 写法不一样 样式属性是属性:属性值 标签属性是属 ...

  5. 常用JS、jquery 命令(不断更新中)

    设置用户粘贴板中的文本信息:window.clipboardData.setData('Text', location.href); 获取用户粘贴板中的文本信息: window.clipboardDa ...

  6. CSS的进一步深入(更新中···)

    在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...

  7. js坑爹笔试题目汇总(持续更新中)

    把你的面试官问倒,你就是一个合格的面试者了,以下总结一些易错的js笔试题目,会持续更新中.欢迎关注 1,考察this var length = 10 function fn(){ alert(this ...

  8. 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)

    Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...

  9. JavaScript资源收集分享,持续更新中。。。

    平时收集的一些JavaScript资源,分享给大家 jQuery UI jEasyUI Extensions http://jqext.sinaapp.com 布局做的挺不错,有比较复杂的菜单导航.P ...

  10. gulpfile.js不断更新中...

    Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...

随机推荐

  1. python之for循环

    for循环,也称定循环,即一般用于循环次数确定的循环,通常可用于遍历序列,如字符串str,列表list,元组tuple等 格式: for 变量 in 序列: command1 command2 ... ...

  2. Numpy增加一列,指定概率指定参数

    这里主要应用到numpy.random.choice 可以根据需求,比如增加一列,A B C 为该列数据,随机概率生成 详见代码 import numpy as np import pandas as ...

  3. Spring Boot 对请求的映射

    在SpringBoot中对请求资源的映射有三种方式: 1.通过编写一个Controller请求,获得客户端发送过来的请求就转发出去 //通过这种方式可以来映射页面请求路径 @PostMapping(& ...

  4. Visual Stdio 2017增加SVN支持

    实验目的 当前公司项目源码文档等内容都保存在svn上,现在是用着小乌龟在文件浏览状态中去检出和提交等操作,没有集成到vs2017中来,比较麻烦.现在要把vs2017增加svn支持,希望可以直接在IDE ...

  5. Unity 属性雷达图

    using System.Collections.Generic; using UnityEngine; [RequireComponent(typeof(MeshFilter),typeof(Mes ...

  6. Go 初体验 - 错误与异常处理

    错误处理是学习任何编程语言都需要考虑的一个重要话题 go 内置的 error 接口是这样的: 先上代码: 输出: 释义: 我们首先定义9行的自定义错误类型 30行再实现 error 接口 34定义打开 ...

  7. docker实战---初级<1>

    第1章 docker容器 1.1 什么是容器 容器就是在隔离的环境运行的一个进程,如果进程停止,容器就会销毁.隔离的环境拥有自己的文件系统,ip地址,主机名等 1.2 容器与虚拟化的区别 linux容 ...

  8. caffe程序中出现的db.cpp:#line(行号) unknown database backend问题

    报错原因:lmdb不可用 解决方法:Makefile.config将此处更改 CPU_ONLY := 1 #如果只使用CPU的话就改这个,使用GPU的不需要改 USE_OPENCV := 1 #有安装 ...

  9. 执行curl 提示curl: (35) SSL connect error

    安装acme证书时,执行如下 curl https://get.acme.sh | sh 提示如下报错: curl: (35) SSL connect error curl -v 跟踪时 发现 NSS ...

  10. Django框架详细介绍---cookie、session、自定义分页

    1.cookie 在HTTP协议介绍中提到,该协议是无状态的,也就是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不会直接影响后面的 ...