Question

如果第二个图像中的图像在代码中没有设置属性“height”，如何用mootools 1.12制作两个相同高度的文件？

<div id="box-1"></div>
<div id="box-2">
 <img src="..." />
 <img src="..." />
 <img src="..." />
</div>

Answer 1

Array.extend({  
    equalize: function(){
        maxHeight = [];

        this.each(function(el){
            maxHeight.push(el.getSize().size.y);
        });

        this.setStyle('height', Math['max'].apply(Math, maxHeight));
    }
});

$$('li').equalize(); // in your case $$('#box-1, #box-2')

onLoad onDomReady时显然已触发。

示例：http://jsfiddle.net/oskar/mE6G3/

Answer 2

对Oskars代码的一些改进：

通过实施Elements，只能在Element集合上调用该方法（并且getSize和setStyle函数始终可用。）
使用map()获得所有高度。
返回集合，因此可以链接该方法。

所以代码变成：

Elements.implement({
    equalHeight: function(){
        // Get height for all elements
        var heights = this.map(function(el){
            return el.getSize().y;
        });

        // Get maximum height
        var maxHeight = Math.max.apply(Math, heights);

        // Set maximum height to all elements
        return this.setStyle('height', maxHeight);
    }
});

这甚至可以写成：

Elements.implement({  
    equalHeight: function(){
        return this.setStyle('height', Math.max.apply(Math, this.map(function(el){
            return el.getSize().y;
        })));
    }
});

用mootools 1.12 </div>制作两个<div>相同的高度

2 个答案: