js的div模型

发表于

div的原型

  1. attributes
    • 行内属性
  2. classList:
    • classList.add() 增加类名
    • classList.remove(); 移除类名
    • classList.toggle(‘d’) 如果有类名d就移除类名d，若果没有就添加类名d（toggle:en,n.触发器、开关）
  3. firstChild/lastChild
  4. firstElementChild/lastElementChildren
  5. hidden
  6. innerHTML
  7. innerText
  8. localName:小写的标签名
  9. nodeType: 1/2/3/8/9/12……

盒子模型

  1. client

    • Width:内容宽度+左右padding
    • Height:内容高度+上下adding
    • Left:左边框的宽度
    • Top: 上边框的宽度
      • ps：右边框的宽度 
        1
        offsetWidth-clientWidth-clientLeft

  2. draggable:true/false 能否被拖拽

  3. offset

    • Width:clientWidth+左右border
    • Height:clientHeight+上下border
    • Parent: 如果父元素存在定位属性(position:relative|absolute|fixed)那么这个offsetParent的值为父元素，如果不是则继续向上级找，查找的body后还没有，则将body作为属性值; => 父级参照物
      • ps：body.offsetParent => null;
      • ps:document.parentNode => null;
    • Left:取决于offsetParent，获取都是当前盒子的外边框距离到offsetParent的内边框的距离 ==》左偏移量
    • Top:取决于offsetParent，获取都是当前盒子的上边框距离到offsetParent的内边框的距离 ==》上偏移量
      • ps： body.offsetLeft => 0
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        /**
         * 求元素相对于body的偏移量
         * @param ele 元素
         * @returns {{left:左偏移量 , top: 上偏移}}
         */
        function offset(ele) {
            var l = null, t = null;
            l += ele.offsetLeft;
            t += ele.offsetTop;
            var par = ele.offsetParent;
            while (par) {
                l += par.clientLeft + par.offsetLeft;
                t += par.clientTop + par.offsetTop;
                par = par.offsetParent;  //更新迭代的par
            }
            return {
                left: l,
                top: t
            }
        }

  4. scroll

    • Height:上padding+内容的高度(有溢出)
    • Left:横向滚动条滚出去的高度(支持赋值，不支持负值)
    • Top:纵向滚动条滚出去的高度(支持赋值，不支持负值)

    • Width:左padding+内容宽度(有溢出)

      1
      2
      3
      4
      5
      document.documentElement.clientWidth || document.body.clientWidth;
      //可是窗口滚出去的高度
      var a = 'scrollTop'
      document.documentElement.scrollTop||document.body[a]

    • 只有scrollTop和scrollLeft支持赋值

      事件

  5. onfocus :获取焦点
  6. onblur： 失去焦点
  7. oncanplay：一般用于媒体文件可以播放的时候
  8. oncanplay

  9. onchange ==>select

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <select name="" id="select">
        <option value="0">沈阳</option>
        <option value="1">大连</option>
        <option value="2">鞍山</option>
        <option value="3">抚顺</option>
        <option value="4">本溪</option>
    </select>
    select.onchange =function(){}

  10. ondblclick:双击

  11. onload:加载成功
  12. onerror：加载失败
  13. oninput
  14. onkeydown:键按下
  15. onkeyup：键弹起
  16. onmousedown：鼠标按下的时候
  17. onmouseup：当鼠标弹起的时候
  18. onmousemove：鼠标移动
  19. onmouseover：鼠标悬停
  20. onmouseout：鼠标离开
  21. onmouseenter：onmouseover
  22. onmouseleave：onmouseleave
  23. onmousewheel：鼠标滚轮 =》判断滚轮的方向
  24. onpause：暂停
  25. onpaly：开始
  26. onprogress：进度条
  27. onratechange：码率
  28. onresize：当大小发生改变的时候==》window.onresize/文本域
  29. onscroll:滚动条滚动的时候
  30. onsubmit:提交按钮提交的时候触发的时候

util==>offset、win、jsonParse、listToArray、getCss

1
2
3
4
5
6
7
function win(attr,value){
    if((Number(value))>=0 && attr ){
        document.documentElement[attr]=document.body[attr]=value;
    }else{
    return document.documentElement[attr]||document.body[attr];
  }
}

如何获取元素已经生效的样式

  1. window.getComputedStyle(ele)[attr]; ie8-不兼容
  2. 兼容写法：ele.currentStyle[attr];
    • 关于透明度
      • 标准中的透明度是 opacity:0-1;
      • ie中的透明度为 filter:alpha(opacity=0-100);
      • 所以为了兼容ie捕获透明度必要时要用正则进行筛选、捕获、和转换
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
            function getCss(ele, attr) {
        //        debugger;
                var val = null;
                if (window.getComputedStyle) {
                    val = window.getComputedStyle(ele)[attr];
                } else {
                    if (attr == 'opacity') {
                        val = ele.currentStyle.filter;
                        var reg = /alpha\(opacity=(\d+(?:\.\d+)?)\)/;
                        if (reg.exec(val)) {
                            val = reg.exec(val)[1] / 100
                        } else {
                            val = 1
                        }
                    } else {
                        val = ele.currentStyle[attr];
                    }
                }
                var reg = /^-?\d+(?:\.\d+)?(px)?$/;  //如果验证能通过就去掉引号和单位否则返回字符串格式
                return reg.test(val) ? parseFloat(val) : val;
            }

设置css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function setCSS(ele,attr,val){
    if(attr=='opacity'){
        ele.style.opacity=val;
        ele.style.filter ='alpha(opacity'+val*100+')'
        return;
    }
    if(attr=='float'){
        ele.style.cssFloat=val;
        ele.style.styleFloat=val;
        return;
    }
    var reg=/width|height|top|left|right|bottom|(?:margin|padding)(?:Left|Right|Top|Bottom)?/;
    if(reg.test(val)&&!isNaN(val)){
        val+='px';
    }
    ele.style[attr]=val;
}