JavaScriptで要素の高さを揃える(4)
改めて考えれば、left,center,rightというclassだけだったら、どうしたらいいだろう?
と考えてみたのが、こちら。あまり良くない方法だけれど(3つのカラムという限定だから)、どうだろう。
ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-script-type" content="text/javascript"> <script type="text/javascript" charset="UTF-8" src="../prototype.js"></script> <title>要素の高さを揃える</title> <style type="text/css"> .left { background-color:#eeeeee; margin:1em; width:25%; padding:1em; float:left; border:1px solid blue; } .center { background-color:#eeeeee; margin:1em; width:25%; padding:1em; float:left; border:1px solid red; } .right{ background-color:#eeeeee; margin:1em; width:25%; padding:1em; float:left; border:1px solid orange; } </style> </head> <body> <h1>要素の高さを揃える</h1> <div id="targetId"> <div class="left"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> <div class="center"> <p> テキストテキストテキストテキスト </p> </div> <div class="right"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </div> <script type="text/javascript"> function compare(a, b) { return a-b; } function elementHeight(targetId){ var elements = new Array(); var elementsLeft = $(targetId).getElementsByClassName('left'); var elementsRight = $(targetId).getElementsByClassName('right'); var elementsCneter = $(targetId).getElementsByClassName('center'); elements = elements.concat(elementsLeft[0]); elements = elements.concat(elementsRight[0]); elements = elements.concat(elementsCneter[0]); var heights = new Array(); for(var i=0; i<elements.length; i++){ var height = Element.getHeight(elements[i]); heights[i] = height; } var maxHeight = heights.sort(compare).pop(); for(var i=0; i<elements.length; i++){ elements[i].style.height = maxHeight + 'px'; } } window.onload = function(){ elementHeight('targetId','colum'); } </script> </body> </html>