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

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

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

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

(一)如果存在行内样式

如果html代码是

<div id="box" class="test" style="height:100px"> 
    1111111 
</div>

发现

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

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

如果html代码是

<style type="text/css">
    #box{
       height:100px;
    }
</style>


<div id="box" class="test"> 
    1111111 
</div>

则结果并不相等了

$("#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上又不好使了

<style type="text/css">
    .test{
        background-color: #FF0;padding:100px;border:100px solid #023456;
    }
</style>

<div id="box" class="test">
    1111111
</div>

会发现输出结果是：

$("#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代码是这样的

<style type="text/css">
    .test{
        background-color: #FF0;padding:100px;border:100px solid #023456;display: none;
    }
</style>

<div id="box" class="test">
    1111111
</div>

结果是：

$("#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);
    },