Web・IT うんたらら

業務系とWeb系の狭間でIT業界を彷徨いながら備忘録と足跡を残していきます

【JavaScript】 IEでselect要素(コンボボックス)の高さを指定する

JavaScript

2013/09/18 追記
※IE10の場合不要かつ、無限ループしてエラーになるようでしたので、スルーするよう修正しました。

IEでは、通常コンボボックス(input type="select")要素の高さが指定できません。
どうしても指定したいとなると文字サイズを変更するしかありません。
ですが、例えば他の入力ボックスと並べてたりして高さを揃えたいという時ありますよね？

ならば、ということで以下の関数を作ってみました。
select要素のstyleが持つheightを高さに反映します。
これを思いついた当初は「天才か……」と思ったものですが、今考えるとただの力技です。
IE6～9で動作確認しました。

//単体
function setSelectHeight(elem, isKeepFontSize){
    if (isKeepFontSize){
        var orgFontSize = elem.style.fontSize;
    }
    var dstHeight = parseInt(elem.style.height.replace('px'), 10);
    for (var fontSize = 1; elem.clientHeight < dstHeight; fontSize++){
        elem.style.fontSize = fontSize + 'px';
    }
    if (isKeepFontSize){
        elem.style.fontSize = orgFontSize;
    }
}

//select要素全て
function setSelectHeightAll(isKeepFontSize) {
    var isMSIE = false;
    /*@cc_on
      @if (@_jscript_version == 10)
          //IE10はIEでないことにする
          isMSIE = false;
      @else
          isMSIE = true;
      @end
    @*/
    if (!isMSIE){
        return;
    }  
    var elems = document.getElementsByTagName('SELECT');
    for (var i = 0, max = elems.length; i < max; i++){
        var elem = elems[i];
        setSelectHeight(elem, isKeepFontSize);
    }
}


とりあえず、HTML側で、

<body onload="setSelectHeightAll()">

とやってあげるとselect要素全部に反映されます。

<body onload="setSelectHeightAll(true)">

こんな感じで引数isKeepFontSizeにtrueを渡すと元の文字サイズを保持します。（IE9以外）

なぜIE9以外かというと……実際には文字サイズをゴリゴリ変えて要素の高さを変えた後、
元の文字サイズに戻すのですが、IE9だと文字サイズを戻した時点で要素の高さも戻ってしまうという。



IEなんてきらいだーーーーー
9は特に、中途半端なHTML5対応と引き換えに、意味不明なバグとか仕様変更が多くて萎えます……
ボーダーなしラジオボタンのサイズ指定とかね……、画像の拡大縮小品質とかね……