teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

解説

2019/01/10 06:59

投稿

yambejp
yambejp

スコア117914

answer CHANGED
@@ -46,4 +46,76 @@
46
46
  <body>
47
47
  test
48
48
  </body>
49
+ ```
50
+
51
+ # 解説付き
52
+ ```javascript
53
+ window.addEventListener('DOMContentLoaded', function(e){
54
+ /*
55
+ * windowがロードされて画面がレンダリングされる前の処理
56
+ */
57
+ if(i=document.querySelectorAll('head link[href]')){
58
+
59
+ /* ここからクローン・削除処理 */
60
+
61
+ /*
62
+ * i=document.querySelectorAll('head link[href]')
63
+ * head内にhref属性を持つlinkがあることを確認し
64
+ * あればiに代入、一つもなければif節から抜ける
65
+ */
66
+ var cln=[].map.call(i,function(x){
67
+ /*
68
+ * iはHTMLCollectionなのでループするメソッドを持たないため
69
+ * Arrayが持つmapコマンドを借りる
70
+ * mapメソッドはiから受け取った要素を順番にxに渡す
71
+ */
72
+ var y=x.cloneNode(true);
73
+ /*
74
+ * xはHTMLElement、それを一度yという変数にクローンしておいておく
75
+ */
76
+ document.querySelector('head').removeChild(x);
77
+ /*
78
+ * headタグからxを削除する
79
+ */
80
+ return y;
81
+ /*
82
+ * y(=クローンしたlink)を戻す
83
+ */
84
+ });
85
+ /*
86
+ * mapでリターンすると戻り値で構成された配列ができあがる
87
+ * したがってclnはhead内のlinkをクローンしたものをリスト化した配列
88
+ */
89
+ /* ここまでクローン・削除処理 */
90
+
91
+ /*
92
+ * 一連の削除が終わると追加処理まで一時的にcssが適用されていない状態になる
93
+ */
94
+
95
+ /* ここから追加処理 */
96
+
97
+ setTimeout(function(){
98
+ /*
99
+ * nミリ秒後にコマンドを実行する
100
+ */
101
+ cln.forEach(function(x){
102
+ /*
103
+ * cln配列から要素を1つ1つ取り出してxに渡す
104
+ */
105
+ document.querySelector('head').appendChild(x);
106
+ /*
107
+ * headにxを追加していく
108
+ */
109
+ });
110
+ },3000);
111
+ /*
112
+ * setTimeoutの待ち時間を3秒とする
113
+ */
114
+
115
+ /* ここまで追加処理 */
116
+
117
+ }
118
+ /* if節の終わり */
119
+
120
+ });
49
121
  ```

1

複数

2019/01/10 06:59

投稿

yambejp
yambejp

スコア117914

answer CHANGED
@@ -18,4 +18,32 @@
18
18
  <body>
19
19
  test
20
20
  </body>
21
+ ```
22
+
23
+ # 複数を想定
24
+ ```javascript
25
+ <head>
26
+ <link rel='stylesheet' type='text/css' href='hoge1.css'></link>
27
+ <link rel='stylesheet' type='text/css' href='hoge2.css'></link>
28
+ <link rel='stylesheet' type='text/css' href='hoge3.css'></link>
29
+ <script>
30
+ window.addEventListener('DOMContentLoaded', function(e){
31
+ if(i=document.querySelectorAll('head link[href]')){
32
+ var cln=[].map.call(i,function(x){
33
+ var y=x.cloneNode(true);
34
+ document.querySelector('head').removeChild(x);
35
+ return y;
36
+ });
37
+ setTimeout(function(){
38
+ cln.forEach(function(x){
39
+ document.querySelector('head').appendChild(x);
40
+ });
41
+ },3000);
42
+ };
43
+ });
44
+ </script>
45
+ </head>
46
+ <body>
47
+ test
48
+ </body>
21
49
  ```