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;
}