回答編集履歴

2

解説

2019/01/10 06:59

投稿

yambejp
yambejp

スコア114581

test CHANGED
@@ -95,3 +95,147 @@
95
95
  </body>
96
96
 
97
97
  ```
98
+
99
+
100
+
101
+ # 解説付き
102
+
103
+ ```javascript
104
+
105
+ window.addEventListener('DOMContentLoaded', function(e){
106
+
107
+ /*
108
+
109
+ * windowがロードされて画面がレンダリングされる前の処理
110
+
111
+ */
112
+
113
+ if(i=document.querySelectorAll('head link[href]')){
114
+
115
+
116
+
117
+ /* ここからクローン・削除処理 */
118
+
119
+
120
+
121
+ /*
122
+
123
+ * i=document.querySelectorAll('head link[href]')
124
+
125
+ * head内にhref属性を持つlinkがあることを確認し
126
+
127
+ * あればiに代入、一つもなければif節から抜ける
128
+
129
+ */
130
+
131
+ var cln=[].map.call(i,function(x){
132
+
133
+ /*
134
+
135
+ * iはHTMLCollectionなのでループするメソッドを持たないため
136
+
137
+ * Arrayが持つmapコマンドを借りる
138
+
139
+ * mapメソッドはiから受け取った要素を順番にxに渡す
140
+
141
+ */
142
+
143
+ var y=x.cloneNode(true);
144
+
145
+ /*
146
+
147
+ * xはHTMLElement、それを一度yという変数にクローンしておいておく
148
+
149
+ */
150
+
151
+ document.querySelector('head').removeChild(x);
152
+
153
+ /*
154
+
155
+ * headタグからxを削除する
156
+
157
+ */
158
+
159
+ return y;
160
+
161
+ /*
162
+
163
+ * y(=クローンしたlink)を戻す
164
+
165
+ */
166
+
167
+ });
168
+
169
+ /*
170
+
171
+ * mapでリターンすると戻り値で構成された配列ができあがる
172
+
173
+ * したがってclnはhead内のlinkをクローンしたものをリスト化した配列
174
+
175
+ */
176
+
177
+ /* ここまでクローン・削除処理 */
178
+
179
+
180
+
181
+ /*
182
+
183
+ * 一連の削除が終わると追加処理まで一時的にcssが適用されていない状態になる
184
+
185
+ */
186
+
187
+
188
+
189
+ /* ここから追加処理 */
190
+
191
+
192
+
193
+ setTimeout(function(){
194
+
195
+ /*
196
+
197
+ * nミリ秒後にコマンドを実行する
198
+
199
+ */
200
+
201
+ cln.forEach(function(x){
202
+
203
+ /*
204
+
205
+ * cln配列から要素を1つ1つ取り出してxに渡す
206
+
207
+ */
208
+
209
+ document.querySelector('head').appendChild(x);
210
+
211
+ /*
212
+
213
+ * headにxを追加していく
214
+
215
+ */
216
+
217
+ });
218
+
219
+ },3000);
220
+
221
+ /*
222
+
223
+ * setTimeoutの待ち時間を3秒とする
224
+
225
+ */
226
+
227
+
228
+
229
+ /* ここまで追加処理 */
230
+
231
+
232
+
233
+ }
234
+
235
+ /* if節の終わり */
236
+
237
+
238
+
239
+ });
240
+
241
+ ```

1

複数

2019/01/10 06:59

投稿

yambejp
yambejp

スコア114581

test CHANGED
@@ -39,3 +39,59 @@
39
39
  </body>
40
40
 
41
41
  ```
42
+
43
+
44
+
45
+ # 複数を想定
46
+
47
+ ```javascript
48
+
49
+ <head>
50
+
51
+ <link rel='stylesheet' type='text/css' href='hoge1.css'></link>
52
+
53
+ <link rel='stylesheet' type='text/css' href='hoge2.css'></link>
54
+
55
+ <link rel='stylesheet' type='text/css' href='hoge3.css'></link>
56
+
57
+ <script>
58
+
59
+ window.addEventListener('DOMContentLoaded', function(e){
60
+
61
+ if(i=document.querySelectorAll('head link[href]')){
62
+
63
+ var cln=[].map.call(i,function(x){
64
+
65
+ var y=x.cloneNode(true);
66
+
67
+ document.querySelector('head').removeChild(x);
68
+
69
+ return y;
70
+
71
+ });
72
+
73
+ setTimeout(function(){
74
+
75
+ cln.forEach(function(x){
76
+
77
+ document.querySelector('head').appendChild(x);
78
+
79
+ });
80
+
81
+ },3000);
82
+
83
+ };
84
+
85
+ });
86
+
87
+ </script>
88
+
89
+ </head>
90
+
91
+ <body>
92
+
93
+ test
94
+
95
+ </body>
96
+
97
+ ```