前端基础23：JS盒子模型及浏览器兼容处理-CSDN博客

正则补充

反引

var reg = /(\w)\1/ \n表示跟第几个分组匹配到的内容一样

JS盒子模型

JS中提供了与盒子模型相关的属性
CSS盒子模型：width，height，border，padding，margin

client系列（和溢出的内容无关）

clientWidth = width+padding（左右）
clientHeight = height+padding（上下）
clientLeft 左边框
clientTop 上边框

offset系列（和溢出的内容无关）

offsetWidth = width+padding（左右）+border（左右）
offsetHeight = height+padding（上下）+border（上下）
与偏移量相关：
- offsetParent参照物
  - 参照物:最近的已经定位的父级元素，若没有找到已经定位的父级元素则参照物是body
  - 已经定位的元素指的是设置position属性（除默认）relative，absolute，fixed,sticky
- offsetLeft左偏移量
偏移量指的是当前元素外边框到参照物内边框的距离
- offsetTop 上偏移量

scroll系列（和溢出的内容有关）

scrollWidth = 真实宽度+padding（左）约等于真实宽度
scrollHeight = 真实高度+padding（上）约等于真实高度
为什么是约等于？
- 在各个浏览器的行高不一样
- 相同浏览器设置overflow属性不同的值结果也不一样
和滚动条相关
scrollLeft滚动条横向卷出的宽度
scrollTop滚动条纵向卷出的高度
- 最小值是0，最大值是真实的高度（ele.scrollHeight）-一屏的高度(ele.clientHeight)
- 超过最大值或小于最小值时都没法设置上

获取一屏高度和整个文档的高度

一屏的高度
- document.documentElement.clientHeight||document.body.clientHeight
文档的高度
- document.documentElement.scrollHeight||document.body.scrollHeight
若没有溢出内容，则一屏的高度和文档的高度是一样的

获取内嵌式或外链式中的任意CSS属性值

window.getComputedStyle
ele.currentStyle

浏览器兼容性处理

1.通过判断属性的方式
- window.getComputedStyle
- "getComputedStyle" in window

    var oDiv = document.getElementById('div1');
    //ele表示当前操作的元素 attr表示CSS属性
    function getCss(ele,attr) {
        if(window.getComputedStyle){//判断此方法是否能被window调用
            return window.getComputedStyle(ele,null)[attr];
        }else {
            return ele.currentStyle[attr];
        }
    }

    console.log(getCss(oDiv, 'fontSize'));
复制代码

2.检测数据类型方式
- typeof

    function getCss(ele,attr) {
        if(typeof getComputedStyle === 'function'){
            return window.getComputedStyle(ele,null)[attr];
        }else {
            return ele.currentStyle[attr];
        }
    }
    console.log(getCss(oDiv, 'fontSize'));
复制代码

- instanceof   ary instanceof Array 可以检测出对象的细分类型
- constructor 指向所属的类 ary.constructor (若原型重写，constructor会有问题)
- Object.prototype.toString.call(null)   "[Object Null]" 最精准检测数据类型方式   前面的是数据类型 后面的是所属类
复制代码

3.判断浏览器

    var oDiv = document.getElementById('div1');
    //ele表示当前操作的元素 attr表示CSS属性
    function getCss(ele,attr) {        
        //3.检测浏览器的方式
        if(/msie [6-8]\.0/.test(navigator.userAgent)){
            return ele.currentStyle[attr];
        }else {
            return window.getComputedStyle(ele,null)[attr];
        }
    }
    console.log(getCss(oDiv, 'fontSize'));
    
复制代码

navigator.userAgent.indexOf('MSIE 8.0') === -1 说明不是IE8浏览器

浏览器兼容性处理2

    //若返回值是有效数+单位，把单位去掉，并转换成number类型，若不是，则原值返回
    var oDiv = document.getElementById('div1');
    function getCss(ele,attr) {
        var res = null;
        if (window.getComputedStyle) {
            res = window.getComputedStyle(ele, null)[attr];
        } else {
            res = ele.currentStyle[attr];
        }
        var reg = /^[+-]?(\d|[1-9]\d+)(\.\d+)?(px|em|pt)?$/;
        return reg.test(res) ? parseFloat(res) : res;
    }
    console.log(getCss(oDiv, 'fontSize'));
复制代码

封装上述三种方法

var utils = (function () {
    function getCss(ele, attr) {
        var res = null;
        if (window.getComputedStyle) {
            res = window.getComputedStyle(ele, null)[attr];
        } else {
            res = ele.currentStyle[attr];
        }
        var reg = /^[+-]?(\d|[1-9]\d+)(\.\d+)?(px|em|pt)?$/;
        return reg.test(res) ? parseFloat(res) : res;
    }

    function setCss(ele, attr, value) {
        if (attr === 'opacity') {
            ele.style.opacity = value;
            ele.style.filter = "alpha(opacity = " + value * 100 + ")";
            return;
        }
        var reg = /^(width|height|(padding|margin)?(left|right|top|bottom)?)$/i;
        //value 进行单位处理
        if (reg.test(attr)) {
            if (!isNaN(value)) {
                value += 'px';
            }
        }
        ele.style[attr] = value;
    }

    function setGroup(ele, obj) {
        //1.检测obj是否是一个对象
        if (Object.prototype.toString.call(obj) !== "[object Object]") return;
        //2.分别给obj中每个css属性设置值
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {//私有属性
                setCss(ele, key, obj[key]);
            }
        }
    }

    function css() {
        //根据参数的类型和个数分别调用不同的方法
        var fn = getCss;//先设置默认调用的方法
        var arg = arguments;
        if (arg.length === 3) fn = setCss;
        if (arg.length === 2 && typeof arg[1] === 'object') fn = setGroup;
        return fn.apply(null, arg);
    }

    return {
        css: css
    }
})();

复制代码