原生js实现jQuery的功能 height()方法实现（一）

r囧r小猫 2022-06-02 11:23 229阅读 0赞

jquery好比一把锋利的匕首，用的好能让你效率倍增，用的不好能让你反受其害。  
最近公司的产品出现了严重的内存泄漏，经过分析是jquery造成的，可能不是jquery本身造成，但jquery的存在导致程序员的事件滥用，dom操作过于频繁，而且jquery+iframe特别是嵌套iframe时，那内存泄漏就是杠杠的了。

痛定思痛之后，公司决定了去掉jquery的依赖，对公司的组件和产品界面进行全面的改造，自然需要用原生js来实现jquery里面常用的一些方法。

今天我们介绍下height()方法的实现。

**(一)如果存在行内样式**

如果html代码是

发现

$("#box").height()=document.getElementById("box").style.height;//输出都是100px

**（二）如果不存在行内样式，而是定义在css文件中**

如果html代码是

则结果并不相等了

$("#box").height()//输出100px;
    document.getElementById("box").style.height;//则是空咯 因为这种方式只能从行内样式获取对应的值

那就改成如果行内样式中获取高度为0时则从css中获取吧

_getStyleValue:function(elObj,attr){ 
            elObj = GoingUtils.getElObj(elObj);
            if(elObj.currentStyle){      //IE
                return elObj.currentStyle[attr];
            }else{
                return getComputedStyle(elObj)[attr];     //Firefox
            }
        }
    parseFloat(GoingUtils._getStyleValue(elObj,"height"));

**（三）如果class中也没定义height样式，ie中会输出auto，需要计算**  
以为大功告成，欣喜的开始使用，谁知道html代码如果写成下面这种方式，在ie上又不好使了

会发现输出结果是：

$("#box").height(); //输出21
    而
    GoingUtils._getStyleValue(elObj,"height") //输出是auto

只能通过offsetHeight从新计算，注意jquery里面获取的高度是不包含边框和padding的 所以需要通过offsetHeight来减去相应的边框和边距。

var borderTopWidth = GoingUtils._getStyleValue(elObj, "borderTopWidth");
                    var borderBottomWidth = GoingUtils._getStyleValue(elObj, "borderBottomWidth");
                    var paddingTop = GoingUtils._getStyleValue(elObj, "paddingTop");
                    var paddingBottom = GoingUtils._getStyleValue(elObj, "paddingBottom")
                    var backHeight = parseFloat(elObj.offsetHeight) - parseFloat(borderTopWidth) - parseFloat(borderBottomWidth) - parseFloat(paddingTop) - parseFloat(paddingBottom);
                    return parseFloat(backHeight);

以为大功告成，那就大错特错了，如果html代码是这样的

结果是：

$("#box").height()//输出21 
    而原生的js获取到的还是0

**(四)元素是display:none，需要设置显示后再进行获取高度**

思路还是比较简单就是把元素显示出来，计算出高度后，再将元素隐藏。

**（五）最终代码应该如下：**

_getStyleValue:function(elObj,attr){ 
            elObj = GoingUtils.getElObj(elObj);
    
            var view = elObj.ownerDocument.defaultView;
            if (!view || !view.opener) {
                view = window;
            }
    
            if(elObj.currentStyle){      //IE
                return elObj.currentStyle[attr];
            }else{
                return view.getComputedStyle(elObj)[attr];     //Firefox
            }
        },
        isShow: function (elObj) { 
            elObj = GoingUtils.getElObj(elObj);
            var display = GoingUtils._getStyleValue(elObj, 'display');
            if (display === 'none') {
                return false;
            } else {
                return true;
            }
        },
        //获取某个元素的高度
        getElHeight: function (elObj) { 
            //如果传入的不是对象是字符串 则通过字符串转换成对象
            elObj = GoingUtils.getElObj(elObj);
            if (elObj != null&&GoingUtils.isShow(elObj)) {
                //从style中获取对应的高度
                if (elObj.style.height != null && elObj.style.height.length > 0) {
                    return parseFloat(elObj.style.height);
                }
                //如果elObj.style.height为空 则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height
                if(parseFloat(GoingUtils._getStyleValue(elObj,"height"))>0) {
                    return parseFloat(GoingUtils._getStyleValue(elObj,"height"));
                }
    
                //如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算
                if (elObj.offsetHeight > 0) {
                    var borderTopWidth = GoingUtils._getStyleValue(elObj, "borderTopWidth");
                    var borderBottomWidth = GoingUtils._getStyleValue(elObj, "borderBottomWidth");
                    var paddingTop = GoingUtils._getStyleValue(elObj, "paddingTop");
                    var paddingBottom = GoingUtils._getStyleValue(elObj, "paddingBottom")
                    var backHeight = parseFloat(elObj.offsetHeight) - parseFloat(borderTopWidth) - parseFloat(borderBottomWidth) - parseFloat(paddingTop) - parseFloat(paddingBottom);
                    return parseFloat(backHeight);
                }
                return 0;
            } else {
                //将元素显示出来 获取高度 再将元素隐藏掉
                GoingUtils.attrEl(elObj,'style',"visibility:hidden;display:block !important;");
                var height=GoingUtils.getElHeight(elObj);
                elObj.removeAttribute('style');
                return height;
            }
            return parseFloat(elObj.style.height);
        },