屏幕13个盒子属性&&处理兼容&获取元素偏移量（3-1）

DOM

自制获取盒子模型属性值（兼容）

  • [x] document.documentElement[attr] || document.body[attr]（属性名是变量的，则这样获取属性值）

    1
    2
    3
    4
    5
    6
    7
        function getsetAttr(attr, value) {
        if (typeof value === "undefined") { //没传参
            return document.documentElement[attr] || document.body[attr]
        }
        document.documentElement[attr] = value;
        document.body[attr] = value;
    }

13个常用属性

  • [ ] 值都是四舍五入

  • [ ] 只有 scrollLeft/scrollTop（改变滚动条位置）是可读写属性，其他都是只读

  • [x] client系列

    • [ ] clientWidth/clientHeight : 设置内容宽/高+上/下填充（跟内容溢出无关）浏览器：clientWidth/clientHeight:浏览器可视区宽/高
    • [ ] clientLeft/clientTop : 边框左/高

  • [x] offset系列

    • [ ] offsetWidth/offsetHeight : 设置内容宽/高+上/下填充+上下边框（跟内容溢出无关）
    • [ ] offsetLeft/offsetTop: : 元素的外边框距父元素的内边框的偏移量
    • [ ] offsetParent : body（父级参照物）
      • （1）.如果所有父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。
      • （2）.如果所有父辈元素中没有定位元素，那么就返回相对于body左边缘距离

  • [x] scroll系列- 如果内容有溢出：约值（不同浏览器中获取到的结果不同）

    • [ ] scrollWidth/scrollHeight： :真实内容+左/上填充 （内容没有溢出则跟clientHeight/clientWidth一样）浏览器：scrollHeight/scrollWidth：当前页面真实内容的宽高

    • [ ] scrollLeft/scrollTop： :滚动条卷去的宽/高

– 系列 Width/Height 值 Left/Top 值
无关溢出 client系列 clientWidth/clientHeight 设置+填充 clientLeft/clientTop 边框左/高
无关溢出 offset系列 offsetWidth/offsetHeight 设置+填充+边框 offsetLeft/offsetTop: 外边距父内边的偏移
有关溢出 scroll系列 scrollWidth/scrollHeight 真实内容+填充 scrollLeft/scrollTop 卷去的宽/高

获取元素样式

  • [x] 1、element.style.attr
    • (只针对行内样式，所以不常用)

  • [x] 2、window.getComputedStyle(当前元素，伪类(null))

    • （经浏览器计算过的样式-只要浏览器呈现出的和未写的）
    • 获取的是CSSStyleDeclarration这个类的实例：包含当前元素所有样式属性和值
    • 不兼容IE6~8
      1
      2
      window.getComputedStyle(box，null).height;
      window.getComputedStyle(box，null)["height"];

  • [x] （IE6~8）element.currentStyle

    1
    element.currentStyle.height;

处理兼容

  • [x] 使用try、catch来处理兼容（不得以使用）：
    • 前提： try中代码在不兼容时要报错才能用catch捕获异常
    • 耗性能: try中代码在不兼容时也执行一遍，才报错后才执行catch（）
  • [x] 判断浏览器是否存在这个属性（常用）
    • getComputedStyle和ele.currentStyle部分样式属性结果不一样
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      if("getComputedStyle" in window)//不用转换布尔值比if(window.getComputedStyle)好
      if(window.getComputedStyle)
      if(typeof window.getComputedStyle==="function")
      function getCss(ele,attr){
          var val =  null;
          
          if("getComputedStyle" in window){
              val = window.getComputedStyle(ele,null)[attr];
          }else{
              val = ele.currentStyle[attr];
          }
          return val;
      }
      //写css样式之前需要清除默认样式避免浏览器间差异
      console.log(getCss(box,"fontFamily"));//chrome->Simsun   IE->Times New Roman
1
2
3
4
5
- [x]  检测浏览器版本 **window.navigator.userAgent**
```js
    if("getComputedStyle" in window)
    if(window.getComputedStyle)
    if(typeof window.getComputedStyle==="function")

（兼容版本）获取元素样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// curEle：[Object] 当前操作元素对象
// attr:[string] 要获取元素的样式属性名称
function getCss(ele, attr) {
    var val = null;
    //判断当前是否存在该属性，存在就兼容
    if ("getComputedStyle" in window) { //不用转换布尔值比if(window.getComputedStyle)好
        val = window.getComputedStyle(ele, null)[attr];
    } else {
        //2次升级：有些属性不兼容（处理opacity的不兼容）
        if (attr == 'opacity') {
            val = ele.currentStyle.filter;
            var fitlerReg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
            val = fitlerReg.test(val) ? fitlerReg.exec(val)[1] / 100 : 1;
        } else {
            val = ele.currentStyle[attr];
        }
    }
    //1次升级：去单位：parseFloat只符合“数字+单位、数字”才能使用（正则检测哪些能去单位哪些不能去单位）
    var reg = /^-?\d+(\.\d+)?(pt|px|em|rem|deg)?$/;
    if (reg.test(val)) {
        val = parseFloat(val);
    }
    return val;
}
console.log(getCss(box, "opacity"));

获取元素偏移量

  • [x] 1、parentNode:父亲节点 HTML层级关系中上一级元素

  • [x] 2、 offsetParent:父级参照物 在同一平面中，最外层的元素是里面所有元素的父级参照物（一般所有元素的父级参照物是body）

    • [ ] position改变父级参照物

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
          position:absolute;
          position:relative;
          position:fixed;
          
      body-->outter-->inner-->center
          
      outer.style.position="relative";
          center.offsetParent;//-->outer
          inner.offsetParent;//-->outer
          outer.offsetParent;//-->body
          
      outer.style.position="relative";
      inner.style.position="relative";
          center.offsetParent;//-->inner
          inner.offsetParent;//-->outer
          outer.offsetParent;//-->body

  • [x] 3、offsetTop/offsetLeft:当前元素外边框距离其父级参照物的内边框距离

    1
    2
    3
    4
    5
    outer.style.position="relative";
    inner.style.position="relative";
        center.offsetParent;//-->inner
        inner.offsetParent;//-->outer
        outer.offsetParent;//-->body

自制函数offset：

  • [ ] 等同于JQuery的offset方法（实现页面任意元素距离body的偏移，不管父级参照物是谁）
    图32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function offset(ele){
        var l = null;
        var t = null;
        var par = ele.offsetParent;//父级参照物
        //自身偏移量
        l += ele.offsetLeft;
        t += ele.offsetTop;
        //找到body时par的值为null;
        while(par){
 //检测I浏览器版本（       IE8中offsetLeft/Top把父级参照物的边框算在内了 ）   if(window.navigator.userAgent.indexOf("MSIE 8") === -1){//不是IE8
            //父级参照物的边框
                l += par.clientLeft;
                t += par.clientTop;
            }
            //父级参照物本身的偏移
            l += par.offsetLeft;
            t += par.offsetTop;
            par = par.offsetParent;
        }
        return {left: l, top: t};
        //反击一个对象
    }