原生js实现jQuery的功能 width()方法实现 (二)

蔚落 2022-06-02 11:35 273阅读 0赞

上一篇介绍了height（）方法的实现，这一篇介绍下width（）的方法实现。  
其实基本类似，直接看代码吧。如果需要了解原理请看height()的方法实现细节。

getElWidth: function (elObj) { 
            //如果传入的不是对象是字符串 则通过字符串转换成对象
            elObj = GoingUtils.getElObj(elObj);
            if (elObj != null&&GoingUtils.isShow(elObj)) {
                //如果标签上定义了style 而且style里面定义了width 则返回width
                if (elObj.style.width != null && elObj.style.width.length > 0) {
                    return parseFloat(elObj.style.width);
                }
                //如果elObj.style.width为空 则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width
                if(parseFloat(GoingUtils._getStyleValue(elObj,"width"))>0) {
                    return parseFloat(GoingUtils._getStyleValue(elObj,"width"));
                }
                //如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算
                if (elObj.offsetWidth > 0) {
                    var borderLeftWidth = GoingUtils._getStyleValue(elObj, "borderLeftWidth");
                    var borderRightWidth = GoingUtils._getStyleValue(elObj, "borderRightWidth");
                    var paddingLeft = GoingUtils._getStyleValue(elObj, "paddingLeft");
                    var paddingRight = GoingUtils._getStyleValue(elObj, "paddingRight")
                    var backWidth = parseFloat(elObj.offsetWidth) - parseFloat(borderLeftWidth) - parseFloat(borderRightWidth) - parseFloat(paddingLeft) - parseFloat(paddingRight);
                    return parseFloat(backWidth);
                }
                return 0;
            } else {
                //将元素显示出来 获取高度 再将元素隐藏掉 注意这里的inline-block 如果是block就是整个宽度了
                GoingUtils.attrEl(elObj,'style',"visibility:hidden;display:inline-block !important;");
                var width=GoingUtils.getElWidth(elObj);
                elObj.removeAttribute('style');
                return Math.ceil(width);
            }
        }