一、client系列

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

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

二、offset系列

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

  offsetLeft/offsetTop  是元素外边距离父级内边距相对于父级,这个父级由定位position:absolute;

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

  offsetTop 参照由父级身上的position:absolute/fixed,如果父级元素身上没有就逐层向上查找,直到body

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

  注意:1、offset必须和position配合使用,往往这个值还必须是absolute;

     2、offset由初始值,在标准浏览器下是8,低版本是0;

     3、 var   t=setInterval (function()){

        aa . style . left=+"px"

    }

三、scroll系列

  scrollWidth/scrollHeight  就是我们设置的宽和高加内边距(内容没有溢出的前提,如果超出了范围就按内容而定)

  scrollLeft/scrollTop  滚动条卷走的高度

四、

  获取浏览器的body的属性是有兼容的

  var  dd=document . body || document . documentElement;

  获取body的整个文档的高

  document . scrollHeight || document . documentElement . scrollHeight;

  获取屏幕的高(浏览器的可视区)

  document . body || document . documentElement . clientHeight

client系列、offset系列、scroll系列的更多相关文章

  1. 前端 ---client、offset、scroll系列

    client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...

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

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

  3. 4.client、offset、scroll系列

    client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...

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

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

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

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

  6. client、offset、scroll系列

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

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

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  8. 16-client、offset、scroll系列

    1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

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

    1.client 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  10. 20190430-screen、client、offset、scroll等JS中各种宽度距离

    参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

随机推荐

  1. 请问snmp到底是干啥的。

    这个事情分两方面来说:首先是路由器这部分.路由器开启SNMP功能之后,它能够对自己的每个接口上的流量有一个统计,当然统计的不单单只有流量.然后路由器把统计到的内容按一定的格式保存起来.这个格式是大家都 ...

  2. Python学习笔记_Mysql数据库、Excel

    一.操作mysql数据库 import pymysql # 1.连上数据库:账号,密码,ip,端口号,数据库 # 2.建立游标(去数据库拿东西的工人) # 3.执行sql # 4.获取结果 # 5.关 ...

  3. 换行和flush()

    在尝试使用BufferedReader的readLine方法读出每一行数据,再用FileWriter依次写到文件里的时候,用了下面的代码段: fr = new FileReader("c:/ ...

  4. Unable to instantiate receiver XXXXXX

    运行一个工程的时候时logcat中出现了“Unable to instantiate receiver XX..”. 检查后发现,由于是东拼西凑的代码,所以在Manifest文件里注册了Receive ...

  5. GC回收算法

    GC回收算法 https://www.cnblogs.com/missOfAugust/p/9528166.html Java语言引入了垃圾回收机制,让C++语言中令人头疼的内存管理问题迎刃而解,使得 ...

  6. 奶牛排序——RMQ

    [问题描述]奶牛在熊大妈的带领下排成了一条直队.显然,不同的奶牛身高不一定相同……现在,奶牛们想知道,如果找出一些连续的奶牛,要求最左边的奶牛 A 是最矮的,最右边的 B 是最高的,且 B 高于 A ...

  7. JNI 接口规范

    1. 简介 Java 本地接口概述 背景 JDK 1.0 本地方法接口 Java 运行时接口 原始本地接口和 Java/COM 接口 目标 Java 本地接口方法 利用 JNI 编程 JDK 1.1. ...

  8. nodejs 全局对象 global

    nodejs中有一个全局对象 global,所有的全局变量都是global对象的属性,glabal最根本的作用是作为全局变量的宿主, 全局变量: 1 在最外层定义的变量 2 全局对象的属性 3 隐式定 ...

  9. JS两个数组比较,删除重复值巧妙方法

    //方法一 var arr1 = [1,2,3,4,5,6,7,8]; //数组A var arr2 = [1,2,3,11,12,13,14];//数组B var temp = []; //临时数组 ...

  10. C++中的new用法总结

    前段时间复习面试的时候,看到这个问题经常有问到,我这个小白就看了些博客和书,总结一下. new可以说是个一个关键字,也可以说是一个运算符,并且可以被重载. 1.new operator 这个就是平时最 ...