HOME>WEBプログラム覚書>[Javascript] Divの高さを合わせるスクリプト(safari対応版)を書きなおす。

[Javascript] Divの高さを合わせるスクリプト(safari対応版)を書きなおす。

Divの高さを合わせるスクリプト(safari対応版)にコメントをいただいたので、 関数内でのid指定ではなく呼び出し時に指定する方法に変更しました。

javascript

  1. (function(){
  2.     window.kantenna = window.kantenna || {};
  3.     /**
  4.      * elementsに含まれるDOMの高さを揃える
  5.      *
  6.      * @var nodeList|array elements
  7.      */
  8.     kantenna.fitHeight = function(elements) {
  9.         var heights = [];
  10.  
  11.         // 要素の高さを取得
  12.         for(i=0; i<elements.length; i++){
  13.             heights[i] = elements[i].height;
  14.         }
  15.  
  16.         // 配列を昇順でソート
  17.         heights.sort(function(a, b){
  18.             return (b - a);
  19.         });
  20.  
  21.          // 一番高いのに合わせる
  22.         for(i=0; i<elements.length; i++){
  23.             elements[i].style.height = heights[0] + "px";
  24.         }
  25.     };
  26. })();

呼び出し側

  1. window.onload = function(){
  2.     kantenna.fitHeight(document.getElementsByTagName('dd'));
  3. }

実行結果

動作確認済みブラウザ
Safari 5.1.7 / Chrome 19.0.1084.52 m / ie 8

元のスクリプトは見るからに酷いんですが、これもクロスブラウザでもないし、実用には向かないと思いますw 実戦投入するのであればjQueryなど優れたライブラリを利用したプラグインの方が、信頼性も高く機能も充実してると思うのでそういうのを探して使うのがよいと思います。

とりあえずおすすめとしては、 jquery.stretchable.jsの作者であるURINさんが公開されているjquery.tile.js というプラグインとか。

投稿日 2012年7月11日 10:56
カテゴリ JavaScript
タグ サンプルコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1308

コメント

コメントする
Name
Email Address
URL