程序员经验分享-hwhale

JS距离的理解

2023-05-16

偏移量


offsetWidth    元素在水平方向上占用的空间大，包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度 

                       offsetWidth=width+padding+border

offsetHeight   元素在垂直方向上占用的空间大小，包括元素的高度、可见的水平滚动条宽度、上边框高度和下边框高度

                       offsetHeight=height+padding+border

offsetLeft       元素相对于父级对象的左边距

offsetTop       元素相对于父级对象的上边距

客户区大小

clientWidth ：浏览器可见区域的宽度；clientWidth=width+padding

clientHeight：浏览器可见区域的高度；clientHeight=width+padding

滚动大小

scrollWidth：元素内容的总宽度(元素可以滚动的区域)；

scrollHeight：元素内容的总高度；

scrollLeft :  被隐藏在内容区域左侧的像素距离
scrollTop : 被隐藏在内容区域顶部的像素距离(滚动跳滚动距离，可写)

其他

clientY:当鼠标事件发生时，鼠标相对于浏览器Y轴的位置（这个不等于页面的距离），也就是浏览器的左上角

screenY:当鼠标时间发生时，鼠标相当于显示屏Y轴的位置，也就是电脑屏幕的左上角

pageX:当鼠标点击的时候发生，鼠标相对于整个文档的X轴的距离，也就是整给页面的左上角

offsetX:当鼠标事件发生时，鼠标相对于事件源Y轴的位置

使用方法envent对象.offsetX

对象距离父级左侧和顶部的距离     offsetLeft，offsetTop （边距）

对象可视区域的宽度和高度     clientWidth，clientHeight   clientWidth=width+padding

对象滚动宽度和高度                scrollWidth，scrollHeight    （对象的实际内容的宽度，不包边线宽度）

对象左侧和顶部滚动的距离     scrollLeft，scrollTop   

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

s = " 网页被卷去的高(ff)：" document.body.scrollTop;
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;

网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

补充：2019/2/21

window.screen.availWidth  返回浏览器窗口可占用的水平宽度（单位：像素）
window.screen.availHeight 
window.screen.width 返回当前屏幕宽度(分辨率值) 
window.screen.height 返回当前屏幕高度(分辨率值) 

一个是分辨率一个是可占用，一般情况下俩者水平方向值是相同的，但高度就不一定了因为大多数的垂直方向，都有一个任务栏，占了一定的PX，所以availWidth会小一点，所以一般情况下用Width是应为好记，加减少误差，但是移动端一般情况是是一样的

window.screen.availWidth 于document.body.offsetWindow的区别就是前者加了margin

页面区域宽高

项目当中：
原来是W3C的标准在作怪啊，认为选中的body
如果在页面中添加这行标记的话 在IE，ireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

距离的理解

JS距离的理解 的相关文章

  • 如何用策略模式，优化你代码里的的if-else？

    最近有一个学妹在跟我沟通如何有效的去避免代码中一长串的if else判断或者switch条件判断 xff1f 针对更多的回答就是合理的去使用设计来规避这个问题 在设计模式中 xff0c 可以使用工厂模式或者策略模式来处理这类问题 xff0c

  • Vue组件生命周期执行顺序

    通过学习他人的博客学习到的知识点 xff0c 小白我 xff0c 顺便总结下 xff0c 引出问题 需求 xff1a 父组件刚更新完 xff0c 子组件要立马获取到父组件中传过来的值 created xff1a 在实例创建完成后被立即调用

  • 前端面试题---DOM测试36

    得分 这个题目7分我是得了4分 解析 第一问 var textarea 61 document querySelector 39 textarea 39 第二问 1 对象添加 textarea rows 61 5 2 元素添加 textar

  • 前端小测----CSS基础测试11

    得分 这个题目8分我得了5分 分析 关于HTML语义 xff1a article用在非常大段的完整的描述内容上 header是表示非常完整的整页的头部 xff0c 不是具体某一两个标题头 对于一个文字列表的标题 xff0c 级别h3 h6之

  • webpack对CSS使用alias相对路径

    问题来源 由于对页面的路由需要一些修改 xff0c 要对几乎全部的 vue文件添加一个父文件 xff0c 然后改路由 xff0c 但是问题来了 xff0c 没一个页面的文件 xff0c 资源路径都要改 xff0c import还好可以用al

  • Base64的学习

    来源 再一次看比如的代码的时候发现别人的图标是一串很长的字符串 xff0c 而不是路径引用 xff0c 从而开启了我对Base64的学习 解决 原生的atob和btoa方法进行Base64的编码 atob xff1a 解码 从a base6

  • localStorage和sessionStorage区别和使用

    一 什么是localStorage 在HTML5中 xff0c 新加入了一个localStorage特性 xff0c 这个特性主要是用来作为本地存储来使用的 xff0c 解决了cookie存储空间不足的问题 cookie中每条cookie的

  • 前端小测----DOM测试38

    得分 我得了2分 xff0c 难受 xff0c 明明感觉是3分的 哈哈 分析 其实这个题目就是对伪类进行了一定考察 xff0c 我太菜了 xff0c 呜呜呜 第一问 xff1a 获取所有匹配required必选的单选框元素 我的答案 var

  • 在vue-cli中使用vue-property-decorator装饰器

    安装 npm i s vue property decorator 如果你的项目是安装了TS那么就可以直接使用 xff0c 如果没有安装TS但是还是想用vue property decorator装饰器那么就还需要去配置一下了 使用vue

  • 图片懒加载

    什么的图片懒加载和预加载大家应该都明白 xff0c 那么小面就来看看如何用JS书写原生懒加载 下面我们在写出懒加载代码块的时候我们先来复习一些下面会遇到的一些知识点 获取客户端高度 var viewHeight 61 document bo

  • 移动端配置

    物理像素 iphone 6 的宽度有750个物理像素 逻辑像素 也叫设备的独立像素 xff0c css像素也是逻辑像素的一种 逻辑像素比 xff08 dpr xff09 物理像素 逻辑像素 xff0c iphone6 的dpr 61 2 常

  • csdn代码片教程

    代码片 代码片功能是一项非常实用的重要功能 xff1a 该功能允许您仅上传一段代码而非整个项目 xff0c 并且您可以像管理git项目一样对代码片进行管理 使用代码片 xff0c 您可以 xff1a 很容易的创建 分享一段代码 在其它网页中

  • 执行上下文

    执行上下文 执行上下文也叫执行环境 xff1f 为什么呢就让我这个英语zz来解释下 context xff1a 环境 xff1b 上下文 执行上下文 xff1a 执行环境中定义了变量或函数有权访问的其他数据 xff0c 决定了他们给各自行为

  • table-call布局

    学习了旭哥的文章总结 等分 lt style gt container display table height 300px width 100 border 1px solid red child display table cell b

  • css小测--两栏布局

    目标效果 这个题得分我是6分中国题是针对表格布局 xff0c flex布局 xff0c inline block布局 xff0c absolute布局来完成 xff0c 大家突然问题来了为什么没float xff0c 嗯 xff0c 这个看

  • Vue $nextTick

    使用场景 1 当改变了DOM中的数据后 xff0c 立马去获取DOM中的数值 2 当我们在watch侦听器中改变了数据 xff0c 立马用这一些数据去做一些操作 xff0c 这里为什么不可以呢 xff1f 因为watch其实应该也算是会被推

  • javaScript 快速排序

    简单理解 首先我觉得我们要明确一般算法都是需要递归的 xff0c 所以我们首先完成第一循环 第一个循环我们找到一个主元 xff08 数组的中间 xff09 xff0c 我们把大于的放右边 xff0c 小于的放左边 然后在分别把主元左边的和右

  • for..in 和 for..of的区别

    in xff1a 支持IE6 43 xff08 老 xff09 枚举对象枚举字符串 xff08 IE9 43 后支持 xff09 枚举数组 xff0c 但是数组只身的方法 xff0c 和原型上的方法也会枚举出来 xff0c xff08 可以

  • 垂直水平居中的方法

    垂直水平居中 HTML解构 lt div class 61 34 container 34 gt lt div class 61 34 box box 11 34 gt 1 lt div gt lt div gt lt div class

随机推荐

  • line-height理解

    行高的单位 百分比 xff1a 突出了行高和字体大小的基佬关系当字体行高的单位为百分比的时候 xff0c 行高以字体大小为依据 em xff1a em这个单位 xff0c 当作用在行高的时候是以当前文字大小为依据 xff0c 当作用在字体大

  • 剖析Vue数据劫持的实现原理

    原文 xff1a https github com DMQ mvvm xff08 包含原文源码 xff09 由于源码的注释比较少 xff0c 我自己加了注释的地址 xff1a https github com zengqingxiao MV

  • css弹性动画

    通过css让生硬的动画变得更加自然 下面我们会通过javaScript和css分别实现 效果图 xff1a 我们知道没一个物体运动都有一个运动轨迹 xff0c 例如上面的小球是模拟的弹簧运动从而让动画更加自然 xff0c 而上图的运动轨迹图

  • C#利用服务器实现客户端之间通信

    这篇文章主要为大家详细介绍了C 利用服务器实现客户端之间通信 xff0c 感兴趣的小伙伴们可以参考一下 先来讲述下我自己对于整个Socket通信过程的理解 xff0c 毕竟初学 xff0c 说错见谅 xff0c 知道错了会改正 1 首先在服

  • js中的节流和防抖

    在学习Element ui源码的过程中有注意到题目使用的节流防抖居然是引用的一个npm包 xff0c 而不是自己写的一个utils为什么我会这样想呢 xff0c 因为在看Data组件的时候E没有使用一些常见的比如 moment 这样的组件库

  • 设计模式

    订阅发布者 事件监听 xff0c 发布 class Pubsub constructor this handles 61 事件的订阅 64 param String type 发布的事件类型 64 param Function handle

  • JS中的变量提升和函数提升问题

    学习完后的总结 Js代码分为两个阶段 xff1a 编译阶段和执行阶段 Js代码的编译阶段会找到所以的申明 xff0c 并用合适的作用域将他们关联起来 xff0c 这个是词法作用域的核心内容 包括变量申明和函数声名都会在代码被执行前的编译阶段

  • this的由来

    JS的数据结构 xff1a var obj 61 foo 5 面的代码将一个对象赋值给变量obj JavaScript 引擎会先在内存 xff08 堆 xff09 里面 xff0c 生成一个对象 foo 5 xff0c 然后把这个对象的内存

  • div中动态文字内容的处理(内容在文字少的时候文字居中，在文字多的时候局左)

    如何实现板块中的内容在文字少的时候文字居中 xff0c 在文字多的时候局左 HTML lt div class 61 34 box2 34 gt lt p class 61 34 content 34 gt 当文字少的时候 lt p gt

  • css流体布局下发宽度分离原则与box-sizing的使用

    学习完了CSS世界的总结 因为默认的box sizing 为content box宽度作用在内容 所以当出现 box width 100px border 1px solid red 或 box width 100px padding 20

  • css任意高度收缩动画技术

    弹性动画学习 学习css世界后 xff1a 利用max height和overflow hidden来实现 HTML lt div class 61 34 box 34 gt lt input id 61 34 check 34 type

  • 学校CSS世界第三章总结

    1 块级元素 块级元素并不等于display xff1a black xff1b li的默认display xff1a list item xff1b table的display默认是table xff1b 他们都符合块级元素的基本特征 x

  • padding属性详细分析

    lt p gt 1 padding会增加元素的尺寸 lt p gt lt p gt 2 padding对内联元素的影响 xff0c 对内联元素的垂直方向的影响是有的但视觉是没有 lt p gt lt a href 61 34 javasvr

  • 利用margin来实现两端对起

    为什么会对齐一般我们给li标签设置margin left最后一个总是会有一个不需要的left那为什么如何去除呢 xff1f 答案是 xff1a margin xff1a 负值 如果ul右边多了20px xff0c 那么给ul设置个margi

  • 裸机通过u盘以hostengine的方式成功安装ovirt4.5

    本次安装是在两台服务器上进行 xff0c 采用hostengine的方式安装 xff0c 也就是一台机上先安装oVirt node xff0c 再安装oVirt engine xff0c 另外一台机安装oVirt node xff0c 并加

  • 关于paddin-bottom的中的未定义的问题

    css世界的学习后 xff1a padding的兼容问题一般遇不到 xff0c 滚轮什么时候出现 xff1a Chrome浏览器的滚轮是在子元素超过content box的时候显示 xff1b IE Firefox是在超过padding b

  • 流动性的深入学习

    何为 34 流 34 流 61 文档流 xff1b 当我们在一个容器中倒入足量的水时 xff0c 水一定会均匀平铺整个容器 所以流动性也就是100 自适应 但width 61 100 xff01 61 流动性自适应100 原因 xff1a

  • 如何用border来画三角形

    学习总结 HTML lt div class 61 34 son 34 gt lt div gt CSS son width 0px border 20px solid border color black transparent tran

  • window和document的区别

    window对象 它是一个顶层对象 而不是另一个对象的属性 xff0c 即浏览器的窗口 document 当前显示的文档 该属性本身也是一个对象

  • JS距离的理解

    偏移量 offsetWidth 元素在水平方向上占用的空间大 xff0c 包括元素的宽度 可见的垂直滚动条宽度 左边框高度和右边框高度 offsetWidth 61 width 43 padding 43 border offsetHeig

热门标签