关于js中的位置

总是记不住,真是脑壳疼,再写一次加深记忆!
张鑫旭的文章戳这里


梳理了一遍,总计下用的最多的几个属性

  • getBoundingClientRect() 这个返回一个数组,top,left都指的是元素相对于浏览器顶端的距离,滚动了就会变化

  • scrollTop : 这个属性用的比较多嘛,可读可写,一般固定滚动条位置就会用到这个,指的是滚动条滚了多长,也就是页面卷起的距离

  • scrollHeight 也好像不太常用。表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候,scrollHeight应该等用于scrollTop + clientHeight

  • offsetTop :这个是js原生属性,得到的是相对父元素的距离!父元素,记住他是相对于父元素就好啊了!jq中就是$("e").offset().top

  • clientLeft/clientTop 不常用,指的是内容距离,一般没有边框的元素这个值都是0,有边框的就是边框的厚度

  • clientHeight/clientWidth 这个得到就是元素的长度和高度了,不包括border

  • offsetWidth 包括边框

  • window.innerHeight 可是窗口的距离

你可能感兴趣的:(关于js中的位置)