offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop

01-offset家族.真实宽高：`offsetWidth`，`offsetHeight`.-真实偏移：margin和定位的偏移组合：`offsetLeft`和`offsetTop`

    <style>.box {width: 100px;height: 100px;background-color: red;text-align: center;line-height: 100px;}</style>
</head><body><div class="box">我是前端小白</div><script>// offset家族获取真实宽高和偏移// style只能获取行内样式let box = document.querySelector('.box')// offset家族可以// 真实宽高：offsetWidth，offsetHeightconsole.log(box.offsetWidth, box.offsetHeight)// 可以拿到行外（不管是哪里的）：拿到的直接就是数字// 真实偏移：margin和定位的偏移组合：offsetLeft和offsetTopconsole.log(box.offsetLeft, box.offsetTop)// offset家族：只能获取不能修改// box.offsetWidth = 200 + 'px' // 没有效果，不会报错</script>
</body>

注意：
1. offset家族获取真实宽高和偏移
2.可以拿到行外（不管是哪里的）：拿到的直接就是数字
3.offset家族：只能获取不能修改

02-offset家族-手动动画案例

    <style>.box {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background-color: red;text-align: center;line-height: 100px;}</style>
</head><body><div class="box"></div><script>// 需求：鼠标移入盒子，盒子宽度变化10px// 1. 给盒子添加一个鼠标移入事件document.querySelector('.box').onmouseover = function () {// 2. 事件处理：在原来的宽度的基础之上改变10px（盒子目前没有border和padding）this.style.width = this.offsetWidth + 10 + 'px'}</script>
</body>

03-offset家族-offsetParent-定位父级

    <style>* {margin: 0;padding: 0;}div {width: 100px;height: 100px;margin-top: 10px;/* margin-left: 50px; */}.box1 {background-color: red;}.box2 {background-color: green;position: relative;}.son {position: absolute;left: 200px;width: 50px;height: 50px;background-color: pink;}</style>
</head><body><div class="box1"><div class="son"></div></div><div class="box2"><div class="son"></div></div><script>// 获取两个son元素let son1 = document.querySelector('.box1 .son')let son2 = document.querySelector('.box2 .son')// 定位父级：offsetParent，有定位的父级元素console.log(son1.offsetParent)  // box1没有定位console.log(son2.offsetParent)  // box2有定位// 定位父级的价值：计算偏移量console.log(son1.offsetLeft)// offsetLeft = left:200 + margin:50console.log(son2.offsetLeft)// offsetLeft = left:200 + margin:50</script>
</body>

注意：
1.定位父级：offsetParent，有定位的父级元素
2.定位父级的价值：计算偏移量

offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop相关推荐

javascript好文---深入理解定位父级offsetParent及偏移大小
前面的话偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...
深入理解定位父级offsetParent及偏移大小
偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个 ...
javascript中定位父级offsetParent 及偏移大小
偏移量(offset dimension)是javascript中一个重要的概念.javascript中涉及到偏移的有offsetWidth.offsetHeight.offsetLeft.offse ...
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高
如题,本人经常设置宽高都是这种,先通过js获取父元素的宽高,别的子元素的宽高.再通过js赋值 this.height = this.$refs.xxx.offsetHeight - this.$ref ...
JS获取video真实宽高
JS获取video真实宽高 JS代码 var video = document.querySelector('video'); video.addEventListener('canplay', fu ...
jquery 获取元素图片_【jQuery】获取图片真实宽高
jQuery有没有获取图片实际尺寸的方法? 就是图片文件的实际尺寸,而不是添加了css样式之后的尺寸. 肥肠真实,如假包换! //code from http://caibaojian.com/jqu ...
【JavaScript-17】BOM-04 获取页面宽高、盒子宽高
八.获取页面宽高响应式页面使用 1.window.innerWidth 不包含控制台.菜单栏(低配版的ie不支持),包含滚动条 var w1 = window.innerWidth;var h1 = ...
HTMLElement.offsetParent（offsetLeft和offsetTop参照offsetParent的内边距边界）
IE7以上(不是火狐): 父级没有定位: 本身没有定位: ==> offsetParent:body 本身定位为:absolute/relative: ==> offsetParent:b ...
css 宽高自适应的div 元素如何居中垂直居中
在我们编写css 样式的时候经常会遇见一个问题那就是一个宽高未知的元素要让他垂直居中如何实现这个呢下面是我常用的两种方法上代码下面的是结构代码 <div class=" ...

offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop

01-offset家族.真实宽高：`offsetWidth`，`offsetHeight`.-真实偏移：margin和定位的偏移组合：`offsetLeft`和`offsetTop`

02-offset家族-手动动画案例

03-offset家族-offsetParent-定位父级

offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop相关推荐

最新文章

热门文章

offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop

01-offset家族.真实宽高：offsetWidth，offsetHeight.-真实偏移：margin和定位的偏移组合：offsetLeft和offsetTop

02-offset家族-手动动画案例

03-offset家族-offsetParent-定位父级

offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop相关推荐

最新文章

热门文章

01-offset家族.真实宽高：`offsetWidth`，`offsetHeight`.-真实偏移：margin和定位的偏移组合：`offsetLeft`和`offsetTop`