前端JavaScript

复习笔记之API(13) JS盒模型系列13个属性

2020-04-21  本文已影响0人  晚月川

元素偏移量offset系列

offset偏移量,我们使用offset系列相关属性可以动态得到该元素的位置(偏移)、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小(宽度高度)
  • 返回的数字都是不带单位的

offset常用属性

offset系列属性 作用
element.offsetParent 返回该元素带有定位的父级元素，如果父级元素都没有定位则返回body
element.offsetTop 返回元素相对于带有定位的父元素上方的偏移
element.offsetLeft 返回元素相对于带有定位的父元素左边框的偏移
element.offsetWidth 返回元素自身包括padding、边框、内容区的宽度，返回的数值不带单位
element.offsetHeight 返回元素自身包括padding、边框、内容区的高度，返回的数值不带单位

offsetParent获取带有定位的父级元素，如果父级元素都没有定位，则返回body;parentNode返回最近一级的父级元素

offset和style的区别

offset style
offset可以得到任意样式表中的样式值 style只能得到行内样式表中的样式值
offset系列获取的数值是没有单位的 style.width获得的是带有单位的字符串
offsetWidth包含padding+border+width style.width获取的属性不包含padding和border值
offsetWidth等属性只读属性,只能获取不能赋值 style.width是可读写属性，可以获取也可以赋值
想要获取元素大小位置，用offset更合适 想要更改元素属性值，则需要用style改变

元素可视区client系列

client客户端,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client系列的相关属性就可以动态的得到该元素的边框大小,元素的大小等

client系列属性 作用
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding和内容区宽度,不含边框,返回的数值不带单位
element.clientHeight 返回自身包括padding和内容区高度,不含边框,返回的数值不带单位

元素滚动条scroll系列

scroll滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小和滚动距离等(返回的数值不带单位)

scroll系列属性 作用
element.scrollTop 返回被卷上去的上侧距离
element.scrollLeft 返回被卷上去的左侧距离
element.scrollWidth 返回自身实际的宽度,不含边框
element.scrollHeight 返回自身实际的高度,不含边框

scroll事件

如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条,当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部,滚动条在滚动时会触发scroll事件

<div>这里面内容很多,我就不写了(是真的很多,至少多到出现滚动条)</div>
<!-- scroll滚动事件:当我们滚动条发生变化时触发的事件 -->
<script>
    let div = document.querySelector('div');
    div.addEventListener('scroll', function() {
        console.log(div.scrollTop);
    })
</script>

三大系列总结

三大系列大小对比 作用 返回数值
element.offsetWidth 返回自身包括padding、边框、内容区域的宽度， 返回数值不带单位
element.clientWidth 返回自身包括padding、内容区域的宽度，不含边框 返回数值不带单位
element.scrollWidth 返回自身实际宽度，不含边框 返回数值不带单位
  • offset系列常用于获取元素的位置offsetLeft、offsetTop
  • client系列经常用于获取元素大小clientWidth、clientHeight
  • scroll系列常用于获取滚动距离scrollTop、scrollLeft
  • 页面滚动距离通过window.pageYOffset获得,如果被卷去的是左侧 window.pageXOffset
上一篇 下一篇

猜你喜欢

热点阅读