一、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 之间的区别的更多相关文章

  1. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  2. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  3. js三大家族offset,scroll,cliennt的区别

    offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...

  4. 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.名词 ...

  5. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

  6. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. client,offset,scroll系列

    client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部 ...

  8. JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

    Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...

  9. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

随机推荐

  1. webpack 4.0 配置方法以及错误解决

    选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...

  2. 走进JUC的世界

    概念 同步锁:synchronized.Lock区别 1.synchronized是不需要进行手动解锁 2.synchronized可以锁方法.锁同步代码块 3.synchronized是Java自带 ...

  3. python---使用pipreqs及遇到的问题

    pipreqs简介 ​ 项目开发的过程中, 避免不了搭建和部署开发环境, 而搭建和部署开发环境需要项目依赖的python第三方包, 如何获取一个项目中所需依赖的python第三方包, 这就需要使用pi ...

  4. Mysql各版本号的含义

    1)MySQL Community Server 社区版本,开源免费,但不提供官方技术支持2)MySQL Enterprise Edition企业版本,需付费,可以试用30天3)MySQL Clust ...

  5. go sync.map源码解析

    go中的map是并发不安全的,同时多个协程读取不会出现问题,但是多个协程 同时读写就会出现 fatal error:concurrent map read and map write的错误.通用的解决 ...

  6. 使用 sh -x 进行 shell 脚本调试

    转载请注明出处:   sh  -x 命令的执行,会将shell 命令的每一个执行步骤进行打印,可以查看到 整个命令或脚本的执行过程的 debug. sh -n 只读取shell脚本,检测语法错误,但不 ...

  7. python黑帽子(第二章)

    TCP客户端 在渗透测试工程中,我们经常会遇到需要创建一个TCP客户端来连接网络.发送垃圾数据.进行模糊测试等任务的情况.但是所处环境不具备丰富的网络工具,下面是一个简单的TCP客户端 import ...

  8. 2022-Aech安装(详细)

    官方wiki:https://wiki.archlinux.org/ 基础安装 一:制作安装介质 下载ISO镜像文件: https://archlinux.org/download/ # 官方下载网址 ...

  9. 共读《redis设计与实现》-单机(一)

    上一章我们讲了 redis 基本类型的数据结构 和 对象系统 ,这篇来说一下单机redis 的知识点. 一.数据库 一个数据库在redis中就有一个结构体,而数据库的结构体是由redisServer这 ...

  10. JVM组成、GC回收机制、算法、JVM常见启动参数、JAVA出现OOM,如何解决、tomcat优化方法

    JVM组成.GC回收机制.算法.JVM常见启动参数.JAVA出现OOM,如何解决.tomcat优化方法