client offset scroll 之间的区别
一、client
属性 | 值 |
clientWidth | 元素被设置的宽度 + padding左右内间距 |
clientHeight | 元素被设置的高度 + padding上下内间距 |
clientLeft | 左 边框的宽度 |
clientTop | 上 边框的宽度 |
二、offset
属性 | 值 |
offsetWidth | 元素被设置的宽度 + padding左右内间距 + 左右边框的值 |
offsetHeight | 元素被设置的高度 + padding上下内间距 + 上下边框的值 |
offsetLeft | 元素外边距离父级左内边距 |
offsetTop | 元素外边距离父级上内边距 |
offsetParent | 返回这个元素的父级元素 |
注:1)offsetLeft/offsetTop:参照由父级身上的 position:absolute/fixed,如果父级元素身上没有就逐层向上查找,直到 body;
2)offset 必须和 position 配合使用,往往这个值还必须是 absolute;
3)offset往往和我们做元素的运动有关;
三、scroll
属性 | 值 |
scrollWidth/scrollHeight | 就是我们设置的宽和高加内边距(内容没有溢出的前提,如果超出了范围就按内容而定) |
scrollLeft/scrollTop | 滚动条卷走的高度 |
四、总结
1)client系列不获取边框数值,offset会获取边框的数值;
2)以上两者获取到的数值都受元素被设置的宽高具体数值影响,如果在出现滚动条的情况下想获取元素内所有内容的实际高度,则使用scrollHeight;
3)获取浏览器的body的属性是有兼容的
var dd=document . body || document . documentElement;
获取body的整个文档的高
document . scrollHeight || document . documentElement . scrollHeight;
获取屏幕的高(浏览器的可视区)
document . body || document . documentElement . clientHeight
client offset scroll 之间的区别的更多相关文章
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- js三大家族offset,scroll,cliennt的区别
offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...
- JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类: JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏
原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...
- JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
- client , offset , scroll 系列 及百度导航栏案例
1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- client,offset,scroll系列
client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部 ...
- JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度
Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
随机推荐
- webpack 4.0 配置方法以及错误解决
选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...
- 走进JUC的世界
概念 同步锁:synchronized.Lock区别 1.synchronized是不需要进行手动解锁 2.synchronized可以锁方法.锁同步代码块 3.synchronized是Java自带 ...
- python---使用pipreqs及遇到的问题
pipreqs简介 项目开发的过程中, 避免不了搭建和部署开发环境, 而搭建和部署开发环境需要项目依赖的python第三方包, 如何获取一个项目中所需依赖的python第三方包, 这就需要使用pi ...
- Mysql各版本号的含义
1)MySQL Community Server 社区版本,开源免费,但不提供官方技术支持2)MySQL Enterprise Edition企业版本,需付费,可以试用30天3)MySQL Clust ...
- go sync.map源码解析
go中的map是并发不安全的,同时多个协程读取不会出现问题,但是多个协程 同时读写就会出现 fatal error:concurrent map read and map write的错误.通用的解决 ...
- 使用 sh -x 进行 shell 脚本调试
转载请注明出处: sh -x 命令的执行,会将shell 命令的每一个执行步骤进行打印,可以查看到 整个命令或脚本的执行过程的 debug. sh -n 只读取shell脚本,检测语法错误,但不 ...
- python黑帽子(第二章)
TCP客户端 在渗透测试工程中,我们经常会遇到需要创建一个TCP客户端来连接网络.发送垃圾数据.进行模糊测试等任务的情况.但是所处环境不具备丰富的网络工具,下面是一个简单的TCP客户端 import ...
- 2022-Aech安装(详细)
官方wiki:https://wiki.archlinux.org/ 基础安装 一:制作安装介质 下载ISO镜像文件: https://archlinux.org/download/ # 官方下载网址 ...
- 共读《redis设计与实现》-单机(一)
上一章我们讲了 redis 基本类型的数据结构 和 对象系统 ,这篇来说一下单机redis 的知识点. 一.数据库 一个数据库在redis中就有一个结构体,而数据库的结构体是由redisServer这 ...
- JVM组成、GC回收机制、算法、JVM常见启动参数、JAVA出现OOM,如何解决、tomcat优化方法
JVM组成.GC回收机制.算法.JVM常见启动参数.JAVA出现OOM,如何解决.tomcat优化方法