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
随机推荐
- NOIP2016总结
Day1: T1:模拟: #include<iostream> #include<cstdio> #include<cstdlib> #include<cst ...
- 织梦栏目页分页title加"第N页"
以上就是调用栏目管理的SEO标题代码:{dede:field.seotitle /}的方法,这样充分体现列表页标题显示的效果,有利于搜索引擎的收录. 第二个问题就是这样列表页的标题都成了一个样子的了, ...
- 简单的JDBC编程步骤
1.加载数据库驱动(com.mysql.jdbc.Driver) 2.创建并获取数据库链接(Connection) 3.创建jdbc statement对象(PreparedStatement) 4. ...
- AtCoder3857:Median Sum (Bitset优化背包&&对称性求中位数)
Median Sum You are given N integers A1, A2, ..., AN. Consider the sums of all non-empty subsequences ...
- WC2017游记
Day0 到杭州之后出了点锅换了辆车,等了好久才开= =到宿舍发现路由器就在房门口,稳啊,过了一会儿就连不上了= =而且只有门口那个连不上,可以连上楼下的= =之后干了啥也忘了…… Day1 上午直接 ...
- 「LuoguP1627 / T36198」 [CQOI2009]中位数
Description 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. Input 第一行为两个正整数n和b,第二行为1 ...
- 【前端】CentOS 7 系列教程之六: 安装 mysql 5.7
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_6.html 进入/usr/local/src目录 cd /usr/local/src 下载mysql的 ...
- bzoj1911 [Apio2010]特别行动队——斜率优化DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1911 相当明显的斜率优化,很好做: 注意slp里面要有(double),以免出现精度问题. ...
- Sublime Text 常用的16 个 Sublime Text 快捷键
在我做了一次包含一些现场编码的演示后,一些观众问我是如何操作这么快.当然这里没有唯一的答案,答案是一堆简单的快捷键和大量的实践的组合.为了回应那些询问,我觉得有必要看看我每天想都不用想且使用的快捷键. ...
- C# 利用Aspose.Slides.dll将本地ppt文档转化成pdf(完美破解版 无水印 无中文乱码)
下载Aspose.Slides.dll http://pan.baidu.com/s/1kVPjnzL 添加引用C#代码. using System; using System.Collectio ...