美文网首页程序员
js中的各种宽高以及位置总结

js中的各种宽高以及位置总结

作者: BrotherWy | 来源:发表于2017-03-21 19:14 被阅读0次

    前言

    被原生js的各种宽高、位置搞到爆炸,所以做一个小小的总结!!!

    dom对象

    只读属性

    clientWidth和clientHeight

    元素的部分内容宽高,即:padding+content,如果没有滚动条,就是元素的宽高,如果有滚动条,则要减去滚动条的宽高!!

    offsetWidth和offsetHeight

    这是 padding+content+border的宽高,与有无滚动条无关,之和元素本神的宽高有关

    clientTop和clientLeft

    这是用来读取元素border的宽高

    offsetLeft和offsetTop

    从该元素的祖先类元素中找Position属性不为static的那个元素,没有找到那就是Body。offsetLeft和offsetTop就是距离找到的祖先类元素左上角的left和top

    scrollHeight和scrollWidth

    当元素内容超出该元素宽高出现滚动条时,scrollHeight和scrollWidth代表的就是该元素内容的实际宽高,单没有超出时,这两个属性是取不到值的

    可读可写属性

    scrollTop和scrollLeft

    指的是元素内的内容卷起的宽高!!!!是可以设置的

    obj.style.*

    这是获取到元素行内元素的方式,可读可写,设置的时候记得带上单位

    event 对象

    clientX和clientY

    相对于浏览器左上角的位置的坐标点

    offestX和offsetY

    相对于事件源的位置,比如点击div,则相对于div的左上角的坐标点

    creenX和screenY

    相对于屏幕左上角的位置的坐标点

    pageY和pageX

    相对与页面左上角的位置,如果没有出现滚动条,那就和clientX,clientY一样,如果出现滚动条,那就要吧被卷起的宽高减去,才能获得 clientX和clientY的效果

    相关文章

      网友评论

        本文标题:js中的各种宽高以及位置总结

        本文链接:https://www.haomeiwen.com/subject/amignttx.html