CSSで複雑な表組みなどをデザインしている際、幅や高さをピクセル単位で細かく指定したいことがありますよね？

ただ、HTMLのstyle要素は記述が汚くなるから使いたくない、でもCSSでわざわざclassを作っているとCSSがごちゃごちゃしてしまう・・・。

そんな場合に、HTMLのclass要素を使って、簡単に幅と高さを指定できるJavaScriptを書いてみました。

ダウンロード

wh.js
※jQueryを利用しますので、別途jQuery 1.3.2以上のバージョンをダウンロードしてください。

ソース

(function($) {
    $(function() {
        $('[class*=w_], [class*=h_]').each(function() {
            var classes = $(this).attr('class').split(' ');

            for (var i in classes) {
                if (match = classes[i].match(/^([wh])_(\d+)(px|p)$/)) {
                    var key = '';
                    var value = '';

                    switch (match[1]) {
                        case 'w':
                            key = 'width';
                            break;
                        case 'h':
                            key = 'height';
                            break;
                    }

                    switch (match[3]) {
                        case 'p':
                            value = match[2] + '%';
                            break;
                        case 'px':
                            value = match[2] + 'px';
                            break;
                    }

                    $(this).removeClass(match[0]).css(key, value);
                }
            }
        })
    });
})(jQuery);

設置

jqueryを利用しますので、本ライブラリを読み込ませる前にjqueryの1.3.2以上を読み込ませてください。

利用方法

class指定に下記のような記述をしてください。

この場合、widthが100ピクセル、heightが200ピクセルの指定がされます。
また、パーセントでの記述も対応しています。

この場合、widthが100％、heightが33%の指定になります。
他のclassとの共存も問題ありませんので、比較的自由なデザインが可能になるかと思います。