美文网首页
JavaScript三大家族

JavaScript三大家族

作者: AuglyXu | 来源:发表于2018-11-13 14:27 被阅读0次

    获取样式的方法

    getComputedStyle

    • window对象的方法,接收两个参数(获取的对象,null)[attr]
    • 返回获取的属性(只读)
    • 格式: window.getComputedStyle(obj, null)[attr]
    • 注意点: IE9以上可用

    currentStyle

    • 格式: obj.currentStyle[attr]
    • 注意点: IE低版本浏览器可用
    兼容性处理
    function getStyle(obj,attr){
      if(obj.currentStyle){
        return obj.currentStyle[attr]
      }else{
        return window.getComputedStyle(obj, null)[attr];
      }
    }
    

    offset家族

    • 由于对象.style.属性只能获取到行内样式,offset家族可以获取到元素的CSS样式,offset家族获取到的是元素占用的宽度和高度,style获取到的是元素的属性
    • CSS样式是指: 在style标签中设置的样式或者在单独CSS文件中设置的样式

    offsetWidth和offsetHeight

    • 占用空间 = width + border + paddding

    offsetLeft和offsetTop

    • 获取元素到第一个定位元素之间的偏移位
    • 如果没有父元素是定位的, 那么就是获取到body的偏移位
    • 注意点: offsetLeft和marginLeft不一样,marginLeft获取的是CSS的值

    client家族

    clientWidth和clientHeight

    • clientWidth和clientHeight代表可是区域内容的宽度和高度
    • clientWidth = width + padding
    • clientHeight = height+ padding

    clientLeft和clientTop

    • clientLeft表示一个元素左边框的宽度
    • clientTop表示一个元素上边框的宽度

    scroll家族

    • scrollHeight:
      • 如果内容没有超过元素的范围, 那么就是元素的padding + height
      • 如果内容超出了元素的范围, 那么就是padding + height + 超出的高度
    • scrollTop:
      • 获取被移出元素范围的距离(参考点不包括border)

    相关文章

      网友评论

          本文标题:JavaScript三大家族

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