PeaceJetのブログ

金融系の社内エンジニアをやりながら、マーケティングやプランナーなども

【JQuery】JavaScriptでcssの幅(width)、高さ(height)を変更する。

レスポンシブ

レスポンシブなランディングページなどを作る際、幅と高さ(縦と横)を動的に変化させなければないときもあるでしょう。

そんなときには、JavaScriptを使う手があります。

JavaScript

ウィンドウの幅が640px以下の時、
対象要素の幅(width)を450px高さ(height)を300pxに設定。
そんな時には以下のようにしてみましょう。

※クラス要素 .video-wrap を対象とする。

  $(window).on('load resize', function () {
        var w = $(window).width();
        if (w < 640) {
            console.log(w);
            $('.video-wrap').css('width', '');
            $('.video-wrap').css('height', '');
        } else {
            $('.video-wrap').css('width','450px');
            $('.video-wrap').css('height','300px');
        }
    });