500以下でも反応しない？

###前提・実現したいこと

ソースコードを書きました。しかし、既に500以上のときに反応しないのですが、どうすれば良いですか？
加えてもうひとつなんですが、サイズを戻したら、背景が赤、白という風になる予定なのですが、元に戻りません。

###該当のソースコード

.wrapper {
    width: 1000px;
    height: 500px;
}


$(window).on("resize", function () {
    var w = $(window).width();
    if (w > 500) {
        $(".wrapper").css({"background-color": "red"});
    }
});

<div class="wrapper">
</div>

s8_chu

2017/08/14 19:45

wrapperを追記していただけませんか？

ZERO_GRA

2017/08/14 19:49

夜遅くにすみません。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

しかし、既に500以上のときに反応しないのですが、どうすれば良いですか？

コンテンツ全体が読み込まれたときにもイベントを行うようにすると良いと思います。

サイズを戻したら、背景が赤、白という風になる予定なのですが、元に戻りません。

背景色を白に設定する処理が抜けているからです。

まとめると、以下のようになります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .wrapper {
13            width: 1000px;
14            height: 500px;
15        }
16    </style>
17</head>
18<body>
19<div class="wrapper"></div>
20<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
21<script>
22    $(window).on("load resize", function () {
23        var w = $(window).width();
24        console.log(w);
25        if (w > 500) {
26            $(".wrapper").css({"background-color": "red"});
27        } else {
28            $(".wrapper").css({"background-color": "white"});
29        }
30    });
31</script>
32</body>
33</html>