回答編集履歴
7
a
answer
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
> ある横幅のサイズウインドウになったらcssのスタイルを変更したいな
|
|
2
2
|
|
|
3
|
-
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。(jQuery
|
|
3
|
+
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。(jQueryに置き換えてください）
|
|
4
4
|
|
|
5
5
|
window幅の変更に応じて何らかの処理を行いたい場合は、windowサイズの変更をwindow.resizeイベントを監視する必要があります。
|
|
6
6
|
|
|
7
7
|
また、windowのリサイズイベントはかなりの高頻度で発火してしまうため、windowサイズの変更に応じて何らかの処理を実行したい場合は、発生するイベントを間引いてあげます。以下のコードではLodashというライブラリのthrottleメソッドを利用して、発生するイベントを間引いています。
|
|
8
8
|
|
|
9
|
+
Lodashを利用するのであれば、jQueryのようにライブラリを読み込んであげる必要がありますので、読み込み方を調べて使ってみてください。
|
|
10
|
+
|
|
9
11
|
```HTML
|
|
10
12
|
<div id='container' class='small'>Hello World</div>
|
|
11
13
|
|
6
a
answer
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
window幅の変更に応じて何らかの処理を行いたい場合は、windowサイズの変更をwindow.resizeイベントを監視する必要があります。
|
|
6
6
|
|
|
7
|
+
また、windowのリサイズイベントはかなりの高頻度で発火してしまうため、windowサイズの変更に応じて何らかの処理を実行したい場合は、発生するイベントを間引いてあげます。以下のコードではLodashというライブラリのthrottleメソッドを利用して、発生するイベントを間引いています。
|
|
7
8
|
|
|
8
9
|
```HTML
|
|
9
10
|
<div id='container' class='small'>Hello World</div>
|
5
a
answer
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
```JavaScript
|
|
25
|
-
var
|
|
25
|
+
var container = document.getElementById('container');
|
|
26
26
|
|
|
27
27
|
function handleWindowResize(event) {
|
|
28
28
|
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
console.log('window is resized!');
|
|
32
32
|
|
|
33
33
|
if (windowOuterWidth >= 767) {
|
|
34
|
-
|
|
34
|
+
container.className = 'big';
|
|
35
35
|
} else {
|
|
36
|
-
|
|
36
|
+
container.className = 'small';
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
}
|
4
a
answer
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
> ある横幅のサイズウインドウになったらcssのスタイルを変更したいな
|
|
2
2
|
|
|
3
|
-
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。
|
|
3
|
+
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。(jQueryの置き換えてください）
|
|
4
4
|
|
|
5
|
+
window幅の変更に応じて何らかの処理を行いたい場合は、windowサイズの変更をwindow.resizeイベントを監視する必要があります。
|
|
5
6
|
|
|
7
|
+
|
|
6
8
|
```HTML
|
|
7
9
|
<div id='container' class='small'>Hello World</div>
|
|
8
10
|
|
3
a
answer
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
> ある横幅のサイズウインドウになったらcssのスタイルを変更したいな
|
|
2
|
+
|
|
3
|
+
CSSのメディアクエリでviewportの横幅に応じて、スタイルを変えるのが良いと思いますが、JavaScriptの勉強ということでしたので、以下はJavaScriptで対応する一例です。
|
|
4
|
+
|
|
5
|
+
|
|
1
6
|
```HTML
|
|
2
7
|
<div id='container' class='small'>Hello World</div>
|
|
3
8
|
|
2
a
answer
CHANGED
|
@@ -31,10 +31,11 @@
|
|
|
31
31
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
window.addEventListener('resize', _.
|
|
34
|
+
window.addEventListener('resize', _.throttle(handleWindowResize, 100));
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
# 参考
|
|
38
38
|
[resize](https://developer.mozilla.org/en-US/docs/Web/Events/resize)
|
|
39
39
|
[jQuery - resize()](https://api.jquery.com/resize/)
|
|
40
|
-
[Lodash](https://lodash.com/)
|
|
40
|
+
[Lodash](https://lodash.com/)
|
|
41
|
+
[lodashの_.throttleと_.debounceの使用例 - Qiita](https://qiita.com/akifo/items/4d715929934a458fb189)
|
1
a
answer
CHANGED
|
@@ -32,4 +32,9 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
window.addEventListener('resize', _.debounce(handleWindowResize, 100));
|
|
35
|
-
```
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
# 参考
|
|
38
|
+
[resize](https://developer.mozilla.org/en-US/docs/Web/Events/resize)
|
|
39
|
+
[jQuery - resize()](https://api.jquery.com/resize/)
|
|
40
|
+
[Lodash](https://lodash.com/)
|