一、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. 使用delphi 开发多层应用(十六)使用XMLRPC 实现basic4android 远程调用RTC服务(讲述了RTC的特点,其底层通讯协议是自己封装SOCK 库,与kbmmw 的适合场合不完全一样)

        RealThinClient (以下简称RTC) 也是一款delphi 多层开发的框架,由于其底层通讯协议是自己封装SOCK 库,抛弃了 大家诟病的indy,因此表现的非常稳定,效率也非常高, ...

  2. 数据结构之 排序---折半插入排序(时间复杂度 O(nlog2 n) )

    排序 Time Limit: 1000MS Memory limit: 32678K 题目描述 给你N(N<=100)个数,请你按照从小到大的顺序输出. 输入 输入数据第一行是一个正整数N,第二 ...

  3. YTU 2421: C语言习题 矩形法求定积分

    2421: C语言习题 矩形法求定积分 时间限制: 1 Sec  内存限制: 128 MB 提交: 354  解决: 234 题目描述 写一个用矩形法求定积分的通用函数,分别求 (说明: sin,co ...

  4. java scoket客户端服务端发送消息

    客户端 public class User { public static void main(String[] args) { while (true) { try { Socket socket ...

  5. iOS多线程全套:线程生命周期,多线程的四种解决方案,线程安全问题,GCD的使用,NSOperation的使用

    目的 本文主要是分享iOS多线程的相关内容,为了更系统的讲解,将分为以下7个方面来展开描述. 多线程的基本概念 线程的状态与生命周期 多线程的四种解决方案:pthread,NSThread,GCD,N ...

  6. NSArray是强引用容器

    经常比较疑惑NSArray.NSDictionary.NSSet这几个对象容器管理对象所采用的方式是“强引用”还是“弱引用”. 通过简单的命令行程序得到的结论是“NSArray.NSDictionar ...

  7. 棋盘问题(dp)

    棋盘问题 传送门 题目描述 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个 ...

  8. flask的config配置和给实例化传入参数

    灵活性主要体现在配置上,需要什么就配置什么 from flask import Flask app = Flask(__name__) # type:Flask # 调试模式:是否开启调试模式并捕获异 ...

  9. 【旧文章搬运】Idle进程相关的一些东西

    原文发表于百度空间,2009-05-13========================================================================== Idle进 ...

  10. bzoj 4530: [Bjoi2014]大融合【LCT】

    新姿势,一般来讲LCT只能维护splay重边里的数据,而这里要求维护整颗子树的size 多维护一个sq表示当前点轻儿子的size和,si表示包括轻重边的整颗子树的大小 然后需要改sq的地方是link和 ...