お世話になります。デザイニウムの及川です。
今回はmootoolsのeach関数を使ったDOM操作のサンプルを紹介したいと思います。
[JS]each関数で上下中央揃えにするサンプル
var dsn = {
init: function() {
},
dominit: function() {
this.setFunc();
},
setFunc: function() {
//class"strblock"を持った全ての要素の高さから位置を決めます
$$('.strblock').each(function(block) {
//この要素の高さと親要素の高さを求める
var hs = block.getHeight();
var phs = block.getParent().getHeight();
var blockPos = ((phs - hs)/2).toInt();
block.setStyle('margin-top', blockPos);
});
}
}
window.addEvent('domready', function(){ dsn.dominit() });
window.onresize = function() {};
window.onload = function() { dsn.init(); };
上記サンプルを使ったデモ： http://www.thedesignium.com/sample/each/
関連リンク: MooTools Docs – Native/Array
個人的にTable要素でのコーディングが主流でなくなってから、一番困っていた「上下中央揃え」を題材としてみました。
※CSSでの中央揃えについては、すでにto-Rさんとヨモツネットさんのところでご紹介されていますので詳しくはそちらをご覧ください。
あとはテキストサイズの変更を自動で検知してくれるtextresizedetector.jsを併用すれば完璧になると思いますたぶん。