DOM元素绑定尺寸-优快云博客

我们已经拥有了获取和设置大小的通用方法了，接下来，我们还想提供一项服务，即绑定大小。先以宽度来说吧，如果我们需要把宽度，和窗口的宽度或另一 DOM 元素的宽度进行绑定，我们需要一个函数，允许传入这两个元素，外加一个可选的计算函数，方便自定义控制，然后这个我们即将实现的函数，还需要返回一个对象，里面包含 dispose 方法，用于随时解除这个绑定关系。那么，这个函数可能长成下面这个样子。

function adaptWidth(element, target, compute) {
 
    // ToDo: Implement it. 下一行即将被删除并被重写。
    return null;
}

现在我们开始实现之。先做个参数为空的校验吧！

if (!element || !target) return {
    dispose: function () { }
};

接下来，我们需要实现一个匿名函数，用于设置宽度。

检查 target 是 window 对象还是 body 内的某一 DOM 对象。
获取 target 当下的宽度。
如果 compute 函数存在的话，使用它进行数值转化。
对 element 设置宽度。

代码如下。

var setWidth = function () {
    var width = target.parent ? (window.innerWidth ? window.innerWidth : document.body.clientWidth) : target.offsetWidth;
    if (!!compute) width = compute(width);
    setSize(element, width, null);
};

然后我们立即调用这个匿名函数。

setWidth();

然而，这只是在调用我们写的这个函数时才会执行一次，对于在此之后的页面变化，并不会重新触发。因此，我们还需要针对这种情况，进行后续跟进，即，当 target 的尺寸发生变化时，我们也需要重新调用这个匿名函数，故需要增加一个事件。

target.addEventListener("resize", setWidth, false);

并返回接触绑定的令牌对象。

return {
    dispose: function () {
        target.removeEventListener("resize", setWidth, false);
    }
};

同理，绑定高度也是如此。

function adaptHeight(element, target, compute) {
 
    // 参数为空检查。
    if (!element || !target) return {
        dispose: function () { }
    };
 
    // 高度设定的匿名函数。
    var setHeight = function () {
        var height = target.parent ? (window.innerHeight ? window.innerHeight : document.body.clientHeight) : target.offsetHeight;
        if (!!compute) height = compute(height);
        setSize(element, null, height);
    };
 
    // 调用高度设定。
    setHeight();
 
    // 添加一个事件，用于监听变动，并重新设定高度。
    target.addEventListener("resize", setHeight, false);
 
    // 返回一个能够取消绑定的对象。
    return {
        dispose: function () {
            target.removeEventListener("resize", setHeight, false);
        }
    };
}

啊哈，一切搞定了！

【完】

文章类型及复杂度：Web 前端开发进阶。

节选翻译自 MSDN 博文 Get and set DOM size，内容有所调整。

http://blogs.msdn.com/b/kingcean/archive/2016/04/14/dom-size.aspx