client系列、offset系列、scroll系列
一、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系列的更多相关文章
- 前端 ---client、offset、scroll系列
client.offset.scroll系列 1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 4.client、offset、scroll系列
client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...
- 差别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...
- 区别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...
- client、offset、scroll系列
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- 16-client、offset、scroll系列
1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 16-----client、offset、scroll 系列
1.client 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 20190430-screen、client、offset、scroll等JS中各种宽度距离
参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
随机推荐
- (linux)块设备驱动程序
1.4.1 Linux块设备驱动程序原理(1) 顾名思义,块设备驱动程序就是支持以块的方式进行读写的设备.块设备和字符设备最大的区别在于读写数据的基本单元不同.块设备读写数据的基本单元为块,例如 ...
- Jackson 对象与json数据互转工具类JacksonUtil
1,User对象 package com.st.json; import java.util.Date; /** * @Description: JSON序列化和反序列化使用的User类 * @aut ...
- javascript中的_return_false和return_true
1. [代码][JavaScript特效]代码 关于javascript中的 return false和return true 2008年12月22日 星期一 下午 09:31return 是 ...
- hdu acm 2844 Coins 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2844 题目意思:有A1,A2,...,An 这 n 种面值的钱,分别对应的数量是C1,C2,...,C ...
- 目录操作(PHP)
1.创建目录(文件夹)mkdir("./test");2.删除目录(文件夹)只能删除空的文件夹rmdir("./test");3.移动目录(文件夹)rename ...
- 棋盘问题(dp)
棋盘问题 传送门 题目描述 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个 ...
- ES6之Object
对象属性模型的相关方法: 对象自身所有属性名称 Object.getOwnPropertyNames(obj) //[] 获取某个属性的attribute对象 Object. ...
- 【旧文章搬运】更正一个枚举PspCidTable时的错误
原文发表于百度空间及看雪论坛,2009-02-27 看雪论坛地址:https://bbs.pediy.com/thread-82919.htm============================= ...
- 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时5
课时5 数据驱动的图像分类方式:K最邻近与线性分类器(下) 在参数化方法中,我们要做的是构造一个函数,输入一张图片,对每一类输出一个数值.对任意一张图片,我们会计算出它到底属于哪一类.这些参数有时候也 ...
- JAVA基础--异常10
一.Object类简介 1.Object类简介 Object,是Java一切对象的最高父类:如果一个类没有显示继承一个类,他的父类就是Object: 它描述的是Java世界里所有对象最最共性的信息,它 ...