PeaceJet

@PeaceJets 2018年、証券会社から転職して人材会社のシステムエンジニアになりました。マーケティングやデータ分析・UI/UX改善などもやっています! #Docker #Ruby #Rails #lambda #GoogleAppsScript #VBA #GitHub http://github.com/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');
        }
    });