js中offset、client、和style的区别，用于个人复习

最新推荐文章于 2022-10-31 18:22:44 发布
最新推荐文章于 2022-10-31 18:22:44 发布
阅读量398 收藏
点赞数
分类专栏： 日常 js 文章标签： javascript css 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjq11111/article/details/121991657
版权
js 同时被 2 个专栏收录
49 篇文章 0 订阅
订阅专栏
日常
23 篇文章 0 订阅
订阅专栏

1.offset和client

offsettWidth  获取的是元素宽度(包括边框)

clientWidth  获取的也是元素的宽度(不包括边框)

offsetLeft    获取的是该元素离上级元素(上级元素是设置了定位的)左边距离

clientLeft    获得的值是该元素的左边框大小

offsetTop    获取的值是该元素距离上级元素(上级元素是设置了定位的，没有就是body)上方的距离

clientTop   获取的值是该元素上边框的大小

2.offset和style

offset获取的值，不带单位，因此我们一般用offset获取元素的值，这样可以更加方便我们使用

style获取的值，带单位，在一定意义上不是很方便我们使用

offset只能获得值，并不能对元素的样式设置，因此在设置元素样式的时候我们依旧使用style

offset也只能获取他所规定的那一些值，列如offsetWidth、offsetHeight、offsetLeft、offsetTop，

外围前端吴彦祖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
offset和client两者的区别
lmmmmmm 的代码生活
06-18 800
文章目录前言`offset`、 `client`、 `scroll`Height & WidthTop & LeftclientX & clientY 前言 最近在看 pink 老师的 JavaScript 的视频，学到 offset 、 client 属性 看到后面跟不上老师的思路，分不清这两者之间的区别 今天下午上课的时候去看了下这两个之间的区别，在 CodePen 上试了下，来记下笔记以后忘了能来复习 offset、 client、 scroll client -> 主
layui弹出层的一些总结
weixin_44540616的博客
06-28 996
layui弹出层的一些总结 开发工具与关键技术： layui弹出层的一些总结 作者：李梓良 撰写时间：2019年6月24日 一. 1.offset: ‘auto’ 默认坐标，即垂直水平居中 2.offset: ‘100px’ 只定义top坐标，水平保持居中 3.offset: [‘100px’, ‘50px’] 同时定义top、lef...
offset与style区别
weixin_69317131的博客
05-02 1081
offset style 1. offset可以得到任意样式表中样式值 1. style只能得到行内样式表中的样式值 2. offset系列获得的数值是没有单位的 2. style.width获得的是带有单位的字符串 3. offsetWidth包含padding+border+width 3.style获得不包含padding和border的值 4. o...
JS通过offsetWidth和width获取div宽度的区别
zhumizhumi的博客
11-16 1765
注：本次测试只用了width做了测试，height也是一样的 1、CSS使用的是内部样式和外部样式 <div id="ceshi">我是测试</div> #ceshi { width: 200px; height: 200px; } // 获取数值 console.dir(document.getElementById('ceshi').style.wid...
offset和style的区别
qq_51929595的博客
01-26 1004
offset和style都可以回的当前元素与父元素之间的距离，常用的有offsetLeft,offsetTop,style.left,style.top等，具体offset和style还是有一些区别。 如果当前没有脱离文档流（元素仍在普通流中，即position值为static或者relative），offsetLeft获取的是当前元素距流中父元素左侧的值，包括父元素的padding-left、margin-left、border-left，注：IE下有误差； 如果当前元素已从普通流中删除，使用了绝对定位
js中offset、client和scroll三大家族
rongfengjin4315的博客
10-16 447
js中offset、client和scroll三大家族介绍
js中offset,client , scroll 三大元素知识点总结
10-16
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结，有需要的朋友们可以学习下。
javascript中offset、client、scroll的属性总结
10-23
主要介绍了javascript中offset、client、scroll的属性总结的相关资料,需要的朋友可以参考下
JS中offset和匀速动画详解
10-18
在JavaScript中，offset属性主要用于获取元素相对于其offsetParent的几何位置信息，这对于创建动态效果和动画至关重要。offset家族包括offsetWidth、offsetHeight、offsetLeft和offsetTop四个成员，它们共同为我们...
Js中offset、client
a1248001936的博客
05-08 381
Js中offset、client有几个相似的属性 Offset：offsetLeft、offsetTop、offsetWidth、offsetHeight； Client：clientLeft、clientTop、clientWidth、clientHeight； 这里使用一个案例，来查看offset、client属性之间的区别； 1.先设置一些基本样式 <!DOCTYPE html> <html lang="en"> <head> <me..
Js之offset属性与style属性的区别
qq_34082921的博客
10-31 660
offsetWidth和.offsetHeight 返回的宽和高是包括padding 内容区 border的，但是不包括margin。所以获取的是元素的实际宽高 = width + border + padding.如果元素没有父级元素或者父级元素没有定位(祖先元素也可以)，则以body为父级。
js offset系列与style系列的区别
黄大仙
08-09 553
获取元素大小位置用offset 给元素更改值用style <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 200px; height: 200px; p
JavaScript中offset,style,client概述与区别
小阿兜的博客
05-07 236
1. offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 2. offset 与 style 区别 offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位...
css中client属性和offset属性的区别
liulang68的博客
07-08 507
offset与style区别详解
Edon_的博客
11-22 239
元素偏移量offset offset与style区别 offset输出的结果为数字 style输出的结果为字符串
JS-那些年困扰我的offsetT/L/W/H和scrollT/L/W/H......
每天进步一点点
05-23 1618
学习过js的人，相信都曾经被这堆东西困扰： clientWidth,clientHeight,clientX，clientY,offsetX.offsetY ,offsetLeft,offsetTop ,offsetWidth,offsetHeight, scrollTop,scrollLeft 等等，看着这堆东西就开始犯晕呕吐。 他们到底是干嘛滴那？今天就来让我们彻底击碎这群玩意，
offset与client的区别
qq_41189709的博客
08-06 1606
offsetWidth 返回的是内容加边框的宽度，width+border clientWidth 返回的只有内容的宽度，不包含边框的宽的 width offsetLeft 返回的是距离上一个有定位父级元素的左边距离 clientLeft 返回的是左边框的宽度 ...
区别client、offset、scroll系列以及event的几个距离属性
VivianHope的专栏
07-28 4566
element元素结点属性一. offset系列1.offsetWidth 和offsetHeightelement.offsetWidth是一个只读属性，它包括了： css width + padding+border+垂直滚动条宽度 这里的滚动条就是单纯滚动条的意思，不包括不可见的部分哦。 而element.offsetHeight与之类似，只是改为垂直方向而已。 在页面布局中要计算和考
javascript中的client
口耳戈是个生僻字
02-28 3334
client  可视区域        offsetWidth:   width +  padding  + border           clientWidth： width  +  padding     不包含border      scrollWidth:   大小是内容的大小      1.1.1  检测屏幕宽度(可视区域)ie9及其以上的版本window.innerWidth  标...
请讲一讲JavaScript中offset，scroll，client，三者的作业与区别
最新发布
03-27
在JavaScript中，offset、scroll和client都是针对元素位置和大小的属性。 1. offset offset指的是一个元素相对于其定位父元素的位置。offset包含了元素的位置（left和top）和大小（width和height），以像素为单位...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值