JavaScriptで要素の高さを揃える(2)
JavaScriptで要素の高さを揃えるというエントリーを書きました。
使い方を全然書いていませんでした。
概要
- JavaScriptは最後に書いています
- JavaScriptで、idがtargetIdという要素の中にあるcolumというclassが指定されている要素について高さを取得していき、一番高い要素の値を元に、全部の要素の高さを揃えます
実際のソース全部
<!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"> .colum{ background-color:#eeeeee; margin:1em; width:25%; padding:1em; float:left; } </style> </head> <body> <h1>要素の高さを揃える</h1> <div id="targetId"> <div class="colum"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> <div class="colum"> <p> テキストテキストテキストテキスト </p> </div> <div class="colum"> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </div> <script type="text/javascript"> function compare(a, b) { return a-b; } function elementHeight(targetId, targetClass){ var elements = $(targetId).getElementsByClassName(targetClass); 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>