offset: 可以动态的得到该元素的位置(偏移),大小等
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
返回的数值都不带单位
element.offsetParent: 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop: 返回元素相对带有定位父元素上方的偏移
element.offsetLeft: 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth: 返回自身包括padding 边框 内容区的宽度 返回数值不带单位
element.offsetHeight: 返回自身包括padding 边框 内容区的高度 返回数值不带单位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>offset</title> <style> *{ margin: 0; padding: 0; } .father{ position: relative; width: 200px; height: 200px; background-color: pink; margin: 100px; } .son{ width: 100px; height: 100px; background-color: lightblue; margin-left: 45px; } .w{ width: 200px; height: 200px; background-color: skyblue; margin: 0 auto 200px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <div class="w"></div> <script> var father = document.querySelector('.father') var son = document.querySelector('.son') // 1.offset系列 得到元素的偏移 位置 返回的不带单位的数值 console.log(father.offsetTop); console.log(father.offsetLeft); console.log('------'); // 它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以body为准 console.log(son.offsetTop); console.log(son.offsetLeft); console.log('------'); var w = document.querySelector('.w') // 2.可以得到元素的大小 宽度和高度 是包含 padding + border + width console.log(w.offsetWidth); console.log(w.offsetHeight); //3.返回带有定位的父亲 否则返回的是body console.log(son.offsetParent); //返回带有定位的父亲 否则返回的是body console.log(son.parentNode); //返回父亲 是最近一级的 不管有没有定位 </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
