質問編集履歴

3

質問内容を元に戻しました。

2018/06/08 00:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,704 +18,632 @@
18
18
 
19
19
 
20
20
 
21
+
22
+
23
+ samplejs.html
24
+
21
25
  ```
22
26
 
27
+ <!DOCTYPE html>
28
+
29
+ <html lang = "ja">
30
+
31
+ <head>
32
+
33
+ <meta charset= "utf-8">
34
+
35
+ <title>サンプルページ</title>
36
+
37
+ </head>
38
+
39
+
40
+
41
+ <body>
42
+
43
+ <header>
44
+
45
+ <h1>サンプルページ</h1>
46
+
47
+ </header>
48
+
49
+
50
+
51
+ <nav class ="dropdown">
52
+
53
+ <h2>メニュー</h2>
54
+
55
+ <ul>
56
+
23
- var header = document.getElementsByTagName('header');
57
+ <li><a href ="no1.html">その1</a></li>
58
+
24
-
59
+ <li><a href ="no2.html">その2</a></li>
60
+
61
+ <li><a href ="no3.html">その3</a></li>
62
+
63
+ </ul>
64
+
65
+ </nav>
66
+
67
+
68
+
69
+ <article>
70
+
71
+ <h2>内容1</h2>
72
+
73
+ <p>文章1</p>
74
+
75
+ <br>
76
+
77
+ <h2>内容2</h2>
78
+
25
- for (var i = 0; i < header.length; i++) {
79
+ <p id = "paragraph1">行1
80
+
26
-
81
+ <br>行2
82
+
83
+ <br>行3</p>
84
+
85
+ <br>
86
+
87
+ <h3>内容3</h3>
88
+
89
+ <p id = "paragraph2">行1
90
+
91
+ <br>行2</p>
92
+
93
+ <ul>
94
+
95
+ <ol>
96
+
97
+ <li>項目1</li>
98
+
99
+ <li>項目2</li>
100
+
101
+ </ol>
102
+
103
+ </ul>
104
+
105
+
106
+
107
+ <form>
108
+
109
+ <h2>フォーム</h2>
110
+
111
+ <div>
112
+
27
- header[i].style['text-align'] = 'center'; //header .style['text-align']?
113
+ <lavel>氏名:<input type="text" size="15" name="name"></lavel><br>
114
+
28
-
115
+ <label>問い合わせ内容:<input type="text" size="20" name="question"></label><br>
116
+
29
- header[i].style.height = '100px';
117
+ <input type="submit" value="submit">
30
-
118
+
31
- }
119
+ </div>
120
+
121
+ </form>
122
+
123
+
124
+
125
+ </article>
32
126
 
33
127
 
34
128
 
35
129
 
36
130
 
131
+ <footer>
132
+
133
+ <ul>
134
+
135
+ <a href ="page1.html">他のページ1</a>
136
+
137
+ <a href ="page2.html">他のページ2</a>
138
+
139
+ </ul>
140
+
141
+ <small>Copyright &copy; </small>
142
+
143
+ </footer>
144
+
145
+
146
+
147
+ <!-- JavaScriptで装飾指定 -->
148
+
149
+ <script>
150
+
151
+ var header = document.getElementsByTagName('header');
152
+
153
+ header.style.text-align = 'center';
154
+
155
+
156
+
157
+
158
+
37
159
  var body = document.getElementsByTagName('body');
38
160
 
161
+
162
+
163
+ var nav = document.getElementsByTagName('nav');
164
+
39
- for (var i = 0; i < body.length; i++) {
165
+ nav.style.float = 'left';
40
-
166
+
41
- body[i].style.line-height = '2.0';
167
+ nav.style.width ='200px';
168
+
169
+      
170
+
42
-
171
+ //JavaScriptに変更したときに「.dropdown」はどうなるのかわからない部分
172
+
173
+ .dropdown{
174
+
175
+ position: relative;
176
+
177
+ width: 190px;
178
+
43
- }
179
+ }
180
+
181
+
182
+
183
+ .dropdown h2{
184
+
185
+ text-align: center;
186
+
187
+ background-color: #ffff58;
188
+
189
+ margin: 0;
190
+
191
+ padding: 12px 16px;
192
+
193
+ }
194
+
195
+
196
+
197
+ .dropdown ul{
198
+
199
+ display: none;
200
+
201
+ position: absolute;
202
+
203
+ background-color: rgb(100, 100, 255);
204
+
205
+ box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
206
+
207
+ list-style-type: none;
208
+
209
+ margin: 0;
210
+
211
+ padding: 0;
212
+
213
+ z-index: 1;
214
+
215
+ }
216
+
217
+
218
+
219
+ .dropdown a{
220
+
221
+ display: block;
222
+
223
+ color: #000;
224
+
225
+ padding: 12px 16px;
226
+
227
+ text-decoration: none;
228
+
229
+ width: 158px;
230
+
231
+ }
232
+
233
+
234
+
235
+ .dropdown a:hover{
236
+
237
+ background-color: #555;
238
+
239
+ color: #fff;
240
+
241
+ }
242
+
243
+
244
+
245
+ .dropdown:hover h2{
246
+
247
+ background-color: rgb(100, 100, 255);
248
+
249
+ }
250
+
251
+
252
+
253
+ .dropdown:hover ul{
254
+
255
+ display: block;
256
+
257
+ }
258
+
259
+
260
+
261
+ var article = document.getElementsByTagName('article')[0];
262
+
263
+ atricle.style.left-margin = '210px';
264
+
265
+ atrticle.style.float = 'left';
266
+
267
+
268
+
269
+ var h1 = document.getElementsByTagName('h1')[0];
270
+
271
+ h1.style.margin = '15px';
272
+
273
+ h1.style.font-size = '3.0vw';
274
+
275
+
276
+
277
+ var h3 = document.getElementsByTagName('h3')[0];
278
+
279
+ h3.style.textDecoration = 'underline';
280
+
281
+
282
+
283
+ a:visited{
284
+
285
+ color: rgb(206, 96,9);
286
+
287
+ }
288
+
289
+
290
+
291
+ p em{
292
+
293
+ font-style: italic;
294
+
295
+ font-weight: bold;
296
+
297
+ }
298
+
299
+
300
+
301
+ var footer = document.getElementsByTagName('footer')[0];
302
+
303
+ footer.style.clear = 'left';
304
+
305
+ footer.style.margin-left = '200px';
306
+
307
+ </script>
308
+
309
+
310
+
311
+ </body>
312
+
313
+ </html>
44
314
 
45
315
  ```
46
316
 
317
+
318
+
47
- 具体的には、上記の部分でvar bodyを追加すると、var header設定が表示されなくなってしまうという問題に直面しています。
319
+ ### 該当ソースコード
48
-
49
-
50
-
320
+
51
- また、
321
+ sample.html
52
-
322
+
53
- HTML
323
+ ```HTML
324
+
325
+ <!DOCTYPE html>
326
+
327
+ <html lang = "ja">
328
+
329
+ <head>
330
+
331
+ <meta charset= "utf-8">
332
+
333
+ <title>サンプルページ</title>
334
+
335
+ <link rel="stylesheet" href="sample.css" type="text/css" />
336
+
337
+ </head>
338
+
339
+
340
+
341
+ <body>
342
+
343
+ <header>
344
+
345
+ <h1>サンプルページ</h1>
346
+
347
+ </header>
348
+
349
+
350
+
351
+ <!-- menu -->
352
+
353
+ <nav class ="dropdown">
354
+
355
+ <h2>メニュー</h2>
356
+
357
+ <ul>
358
+
359
+ <li><a href ="no1.html">その1</a></li>
360
+
361
+ <li><a href ="no2.html">その2</a></li>
362
+
363
+ <li><a href ="no3.html">その3</a></li>
364
+
365
+ </ul>
366
+
367
+ </nav>
368
+
369
+
370
+
371
+ <!-- main content -->
372
+
373
+ <article>
374
+
375
+ <h2>内容1</h2>
376
+
377
+ <p>文章1</p>
378
+
379
+ <br>
380
+
381
+ <h2>内容2</h2>
382
+
383
+ <p id = "paragraph1">行1
384
+
385
+ <br>行2
386
+
387
+ <br>行3</p>
388
+
389
+ <br>
390
+
391
+ <h3>内容3</h3>
392
+
393
+ <p id = "paragraph2">行1
394
+
395
+ <br>行2</p>
396
+
397
+ <ul>
398
+
399
+ <ol>
400
+
401
+ <li>項目1</li>
402
+
403
+ <li>項目2</li>
404
+
405
+ </ol>
406
+
407
+ </ul>
408
+
409
+
410
+
411
+ <form>
412
+
413
+ <h2>フォーム</h2>
414
+
415
+ <div>
416
+
417
+ <lavel>氏名:<input type="text" size="15" name="name"></lavel><br>
418
+
419
+ <label>問い合わせ内容:<input type="text" size="20" name="question"></label><br>
420
+
421
+ <input type="submit" value="submit">
422
+
423
+ </div>
424
+
425
+ </form>
426
+
427
+
428
+
429
+ </article>
430
+
431
+
432
+
433
+
434
+
435
+ <footer>
436
+
437
+ <ul>
438
+
439
+ <a href ="page1.html">他のページ1</a>
440
+
441
+ <a href ="page2.html">他のページ2</a>
442
+
443
+ </ul>
444
+
445
+ <small>Copyright &copy; </small>
446
+
447
+ </footer>
448
+
449
+
450
+
451
+ </body>
452
+
453
+ </html>
54
454
 
55
455
  ```
56
456
 
457
+ sample.css
458
+
459
+ ```css
460
+
461
+ header{
462
+
463
+ height: 100px;
464
+
465
+ text-align: center;
466
+
467
+ }
468
+
469
+
470
+
471
+
472
+
473
+ body{
474
+
475
+ line-height: 2.0;
476
+
477
+ }
478
+
479
+
480
+
481
+
482
+
483
+ nav{
484
+
485
+ float: left;
486
+
487
+ width: 200px;
488
+
489
+ }
490
+
491
+
492
+
493
+ .dropdown{
494
+
495
+ position: relative;
496
+
497
+ width: 190px;
498
+
499
+ }
500
+
501
+
502
+
503
+ .dropdown h2{
504
+
505
+ text-align: center;
506
+
507
+ background-color: #ffff58;
508
+
509
+ margin: 0;
510
+
511
+ padding: 12px 16px;
512
+
513
+ }
514
+
515
+
516
+
517
+ .dropdown ul{
518
+
519
+ display: none;
520
+
521
+ position: absolute;
522
+
523
+ background-color: rgb(100, 100, 255);
524
+
57
- <nav class ="dropdown">
525
+ box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
526
+
527
+ list-style-type: none;
528
+
529
+ margin: 0;
530
+
531
+ padding: 0;
532
+
533
+ z-index: 1;
534
+
535
+ }
536
+
537
+
538
+
539
+ .dropdown a{
540
+
541
+ display: block;
542
+
543
+ color: #000;
544
+
545
+ padding: 12px 16px;
546
+
547
+ text-decoration: none;
548
+
549
+ width: 158px;
550
+
551
+ }
552
+
553
+
554
+
555
+ .dropdown a:hover{
556
+
557
+ background-color: #555;
558
+
559
+ color: #fff;
560
+
561
+ }
562
+
563
+
564
+
565
+ .dropdown:hover h2{
566
+
567
+ background-color: rgb(100, 100, 255);
568
+
569
+ }
570
+
571
+
572
+
573
+ .dropdown:hover ul{
574
+
575
+ display: block;
576
+
577
+ }
578
+
579
+
580
+
581
+ article{
582
+
583
+ left-margin: 210px;
584
+
585
+ float: left;
586
+
587
+ }
588
+
589
+
590
+
591
+
592
+
593
+
594
+
595
+ h1{
596
+
597
+ margin: 15px;
598
+
599
+ font-size: 3.0vw;
600
+
601
+ }
602
+
603
+
604
+
605
+
606
+
607
+ h3{
608
+
609
+ text-decoration: underline;
610
+
611
+ }
612
+
613
+
614
+
615
+ /*訪問前後でリンクの文字色を指定*/
616
+
617
+ a:visited{
618
+
619
+ color: rgb(255, 0, 0);
620
+
621
+ }
622
+
623
+
624
+
625
+ p em{
626
+
627
+ font-style: italic;
628
+
629
+ font-weight: bold;
630
+
631
+ }
632
+
633
+
634
+
635
+
636
+
637
+ footer {
638
+
639
+ clear: left;
640
+
641
+ margin-left: 200px;
642
+
643
+ }
58
644
 
59
645
  ```
60
646
 
61
- CSSで
62
-
63
- ```
64
-
65
- .dropdown{
66
-
67
- position: relative;
68
-
69
- width: 190px;
70
-
71
- }
72
-
73
- ```
74
-
75
- とした部分に関しては、document.getElementsByTagNameで取得できるのか、
76
-
77
- もしくは他のメソッドを使用する方法があるのか調べてもわからなかったため、
78
-
79
- JavaScriptでWebページの装飾を各部分でもCSSのままで記述してあります。
80
-
81
-
82
-
83
- samplejs.html
84
-
85
- ```
86
-
87
- <!DOCTYPE html>
88
-
89
- <html lang = "ja">
90
-
91
- <head>
92
-
93
- <meta charset= "utf-8">
94
-
95
- <title>サンプルページ</title>
96
-
97
- </head>
98
-
99
-
100
-
101
- <body>
102
-
103
- <header>
104
-
105
- <h1>サンプルページ</h1>
106
-
107
- </header>
108
-
109
-
110
-
111
- <nav class ="dropdown">
112
-
113
- <h2>メニュー</h2>
114
-
115
- <ul>
116
-
117
- <li><a href ="no1.html">その1</a></li>
118
-
119
- <li><a href ="no2.html">その2</a></li>
120
-
121
- <li><a href ="no3.html">その3</a></li>
122
-
123
- </ul>
124
-
125
- </nav>
126
-
127
-
128
-
129
- <article>
130
-
131
- <h2>内容1</h2>
132
-
133
- <p>文章1</p>
134
-
135
- <br>
136
-
137
- <h2>内容2</h2>
138
-
139
- <p id = "paragraph1">行1
140
-
141
- <br>行2
142
-
143
- <br>行3</p>
144
-
145
- <br>
146
-
147
- <h3>内容3</h3>
148
-
149
- <p id = "paragraph2">行1
150
-
151
- <br>行2</p>
152
-
153
- <ul>
154
-
155
- <ol>
156
-
157
- <li>項目1</li>
158
-
159
- <li>項目2</li>
160
-
161
- </ol>
162
-
163
- </ul>
164
-
165
-
166
-
167
- <form>
168
-
169
- <h2>フォーム</h2>
170
-
171
- <div>
172
-
173
- <lavel>氏名:<input type="text" size="15" name="name"></lavel><br>
174
-
175
- <label>問い合わせ内容:<input type="text" size="20" name="question"></label><br>
176
-
177
- <input type="submit" value="submit">
178
-
179
- </div>
180
-
181
- </form>
182
-
183
-
184
-
185
- </article>
186
-
187
-
188
-
189
-
190
-
191
- <footer>
192
-
193
- <ul>
194
-
195
- <a href ="page1.html">他のページ1</a>
196
-
197
- <a href ="page2.html">他のページ2</a>
198
-
199
- </ul>
200
-
201
- <small>Copyright &copy; </small>
202
-
203
- </footer>
204
-
205
-
206
-
207
- <!-- JavaScriptで装飾指定 -->
208
-
209
- <script>
210
-
211
- var header = document.getElementsByTagName('header');
212
-
213
- for (var i = 0; i < header.length; i++) {
214
-
215
- header[i].style['text-align'] = 'center'; //header .style['text-align']?
216
-
217
- header[i].style.height = '100px';
218
-
219
- }
220
-
221
-
222
-
223
-
224
-
225
- var body = document.getElementsByTagName('body');
226
-
227
- for (var i = 0; i < body.length; i++) {
228
-
229
- body[i].style.line-height = '2.0';
230
-
231
- }
232
-
233
-
234
-
235
- var nav = document.getElementsByTagName('nav')[0];
236
-
237
- nav.style.float = 'left';
238
-
239
- nav.style.width ='200px';
240
-
241
-      
242
-
243
- //JavaScriptに変更したときに「.dropdown」はどうなるのかわからない部分
244
-
245
- .dropdown{
246
-
247
- position: relative;
248
-
249
- width: 190px;
250
-
251
- }
252
-
253
-
254
-
255
- .dropdown h2{
256
-
257
- text-align: center;
258
-
259
- background-color: #ffff58;
260
-
261
- margin: 0;
262
-
263
- padding: 12px 16px;
264
-
265
- }
266
-
267
-
268
-
269
- .dropdown ul{
270
-
271
- display: none;
272
-
273
- position: absolute;
274
-
275
- background-color: rgb(100, 100, 255);
276
-
277
- box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
278
-
279
- list-style-type: none;
280
-
281
- margin: 0;
282
-
283
- padding: 0;
284
-
285
- z-index: 1;
286
-
287
- }
288
-
289
-
290
-
291
- .dropdown a{
292
-
293
- display: block;
294
-
295
- color: #000;
296
-
297
- padding: 12px 16px;
298
-
299
- text-decoration: none;
300
-
301
- width: 158px;
302
-
303
- }
304
-
305
-
306
-
307
- .dropdown a:hover{
308
-
309
- background-color: #555;
310
-
311
- color: #fff;
312
-
313
- }
314
-
315
-
316
-
317
- .dropdown:hover h2{
318
-
319
- background-color: rgb(100, 100, 255);
320
-
321
- }
322
-
323
-
324
-
325
- .dropdown:hover ul{
326
-
327
- display: block;
328
-
329
- }
330
-
331
-
332
-
333
- var article = document.getElementsByTagName('article')[0];
334
-
335
- atricle.style.left-margin = '210px';
336
-
337
- atrticle.style.float = 'left';
338
-
339
-
340
-
341
- var h1 = document.getElementsByTagName('h1')[0];
342
-
343
- h1.style.margin = '15px';
344
-
345
- h1.style.font-size = '3.0vw';
346
-
347
-
348
-
349
- var h3 = document.getElementsByTagName('h3')[0];
350
-
351
- h3.style.textDecoration = 'underline';
352
-
353
-
354
-
355
- a:visited{
356
-
357
- color: rgb(206, 96,9);
358
-
359
- }
360
-
361
-
362
-
363
- p em{
364
-
365
- font-style: italic;
366
-
367
- font-weight: bold;
368
-
369
- }
370
-
371
-
372
-
373
- var footer = document.getElementsByTagName('footer')[0];
374
-
375
- footer.style.clear = 'left';
376
-
377
- footer.style.margin-left = '200px';
378
-
379
- </script>
380
-
381
-
382
-
383
- </body>
384
-
385
- </html>
386
-
387
- ```
388
-
389
-
390
-
391
- ### 該当のソースコード
392
-
393
- sample.html
394
-
395
- ```HTML
396
-
397
- <!DOCTYPE html>
398
-
399
- <html lang = "ja">
400
-
401
- <head>
402
-
403
- <meta charset= "utf-8">
404
-
405
- <title>サンプルページ</title>
406
-
407
- <link rel="stylesheet" href="sample.css" type="text/css" />
408
-
409
- </head>
410
-
411
-
412
-
413
- <body>
414
-
415
- <header>
416
-
417
- <h1>サンプルページ</h1>
418
-
419
- </header>
420
-
421
-
422
-
423
- <!-- menu -->
424
-
425
- <nav class ="dropdown">
426
-
427
- <h2>メニュー</h2>
428
-
429
- <ul>
430
-
431
- <li><a href ="no1.html">その1</a></li>
432
-
433
- <li><a href ="no2.html">その2</a></li>
434
-
435
- <li><a href ="no3.html">その3</a></li>
436
-
437
- </ul>
438
-
439
- </nav>
440
-
441
-
442
-
443
- <!-- main content -->
444
-
445
- <article>
446
-
447
- <h2>内容1</h2>
448
-
449
- <p>文章1</p>
450
-
451
- <br>
452
-
453
- <h2>内容2</h2>
454
-
455
- <p id = "paragraph1">行1
456
-
457
- <br>行2
458
-
459
- <br>行3</p>
460
-
461
- <br>
462
-
463
- <h3>内容3</h3>
464
-
465
- <p id = "paragraph2">行1
466
-
467
- <br>行2</p>
468
-
469
- <ul>
470
-
471
- <ol>
472
-
473
- <li>項目1</li>
474
-
475
- <li>項目2</li>
476
-
477
- </ol>
478
-
479
- </ul>
480
-
481
-
482
-
483
- <form>
484
-
485
- <h2>フォーム</h2>
486
-
487
- <div>
488
-
489
- <lavel>氏名:<input type="text" size="15" name="name"></lavel><br>
490
-
491
- <label>問い合わせ内容:<input type="text" size="20" name="question"></label><br>
492
-
493
- <input type="submit" value="submit">
494
-
495
- </div>
496
-
497
- </form>
498
-
499
-
500
-
501
- </article>
502
-
503
-
504
-
505
-
506
-
507
- <footer>
508
-
509
- <ul>
510
-
511
- <a href ="page1.html">他のページ1</a>
512
-
513
- <a href ="page2.html">他のページ2</a>
514
-
515
- </ul>
516
-
517
- <small>Copyright &copy; </small>
518
-
519
- </footer>
520
-
521
-
522
-
523
- </body>
524
-
525
- </html>
526
-
527
- ```
528
-
529
- sample.css
530
-
531
- ```css
532
-
533
- header{
534
-
535
- height: 100px;
536
-
537
- text-align: center;
538
-
539
- }
540
-
541
-
542
-
543
-
544
-
545
- body{
546
-
547
- line-height: 2.0;
548
-
549
- }
550
-
551
-
552
-
553
-
554
-
555
- nav{
556
-
557
- float: left;
558
-
559
- width: 200px;
560
-
561
- }
562
-
563
-
564
-
565
- .dropdown{
566
-
567
- position: relative;
568
-
569
- width: 190px;
570
-
571
- }
572
-
573
-
574
-
575
- .dropdown h2{
576
-
577
- text-align: center;
578
-
579
- background-color: #ffff58;
580
-
581
- margin: 0;
582
-
583
- padding: 12px 16px;
584
-
585
- }
586
-
587
-
588
-
589
- .dropdown ul{
590
-
591
- display: none;
592
-
593
- position: absolute;
594
-
595
- background-color: rgb(100, 100, 255);
596
-
597
- box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
598
-
599
- list-style-type: none;
600
-
601
- margin: 0;
602
-
603
- padding: 0;
604
-
605
- z-index: 1;
606
-
607
- }
608
-
609
-
610
-
611
- .dropdown a{
612
-
613
- display: block;
614
-
615
- color: #000;
616
-
617
- padding: 12px 16px;
618
-
619
- text-decoration: none;
620
-
621
- width: 158px;
622
-
623
- }
624
-
625
-
626
-
627
- .dropdown a:hover{
628
-
629
- background-color: #555;
630
-
631
- color: #fff;
632
-
633
- }
634
-
635
-
636
-
637
- .dropdown:hover h2{
638
-
639
- background-color: rgb(100, 100, 255);
640
-
641
- }
642
-
643
-
644
-
645
- .dropdown:hover ul{
646
-
647
- display: block;
648
-
649
- }
650
-
651
-
652
-
653
- article{
654
-
655
- left-margin: 210px;
656
-
657
- float: left;
658
-
659
- }
660
-
661
-
662
-
663
-
664
-
665
-
666
-
667
- h1{
668
-
669
- margin: 15px;
670
-
671
- font-size: 3.0vw;
672
-
673
- }
674
-
675
-
676
-
677
-
678
-
679
- h3{
680
-
681
- text-decoration: underline;
682
-
683
- }
684
-
685
-
686
-
687
- /*訪問前後でリンクの文字色を指定*/
688
-
689
- a:visited{
690
-
691
- color: rgb(255, 0, 0);
692
-
693
- }
694
-
695
-
696
-
697
- p em{
698
-
699
- font-style: italic;
700
-
701
- font-weight: bold;
702
-
703
- }
704
-
705
-
706
-
707
-
708
-
709
- footer {
710
-
711
- clear: left;
712
-
713
- margin-left: 200px;
714
-
715
- }
716
-
717
- ```
718
-
719
647
 
720
648
 
721
649
 

2

発生している問題の修正

2018/06/08 00:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,36 @@
18
18
 
19
19
 
20
20
 
21
+ ```
22
+
23
+ var header = document.getElementsByTagName('header');
24
+
25
+ for (var i = 0; i < header.length; i++) {
26
+
27
+ header[i].style['text-align'] = 'center'; //header .style['text-align']?
28
+
29
+ header[i].style.height = '100px';
30
+
31
+ }
32
+
33
+
34
+
35
+
36
+
37
+ var body = document.getElementsByTagName('body');
38
+
39
+ for (var i = 0; i < body.length; i++) {
40
+
41
+ body[i].style.line-height = '2.0';
42
+
43
+ }
44
+
45
+ ```
46
+
47
+ 具体的には、上記の部分でvar bodyを追加すると、var headerの設定が表示されなくなってしまうという問題に直面しています。
48
+
49
+
50
+
21
51
  また、
22
52
 
23
53
  HTMLで
@@ -178,17 +208,27 @@
178
208
 
179
209
  <script>
180
210
 
181
- var header = document.getElementsByTagName('header')[0];
211
+ var header = document.getElementsByTagName('header');
212
+
182
-
213
+ for (var i = 0; i < header.length; i++) {
214
+
183
- header.style.text-align = 'center'; //header .style['text-align']?
215
+ header[i].style['text-align'] = 'center'; //header .style['text-align']?
184
-
216
+
185
- header.style.height = '100px';
217
+ header[i].style.height = '100px';
218
+
186
-
219
+ }
187
-
188
-
220
+
221
+
222
+
223
+
224
+
189
- var body = document.getElementsByTagName('body')[0];
225
+ var body = document.getElementsByTagName('body');
226
+
190
-
227
+ for (var i = 0; i < body.length; i++) {
228
+
191
- body.style.line-height = '2.0';
229
+ body[i].style.line-height = '2.0';
230
+
231
+ }
192
232
 
193
233
 
194
234
 

1

samplejs.htmlを修正

2018/06/07 22:26

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -178,27 +178,29 @@
178
178
 
179
179
  <script>
180
180
 
181
- var header = document.getElementsByTagName('header');
181
+ var header = document.getElementsByTagName('header')[0];
182
-
182
+
183
- header.style.text-align = 'center';
183
+ header.style.text-align = 'center'; //header .style['text-align']?
184
184
 
185
185
  header.style.height = '100px';
186
186
 
187
187
 
188
188
 
189
- var body = document.getElementsByTagName('body');
189
+ var body = document.getElementsByTagName('body')[0];
190
190
 
191
191
  body.style.line-height = '2.0';
192
192
 
193
193
 
194
194
 
195
- var nav = document.getElementsByTagName('nav');
195
+ var nav = document.getElementsByTagName('nav')[0];
196
196
 
197
197
  nav.style.float = 'left';
198
198
 
199
199
  nav.style.width ='200px';
200
200
 
201
+      
202
+
201
-
203
+ //JavaScriptに変更したときに「.dropdown」はどうなるのかわからない部分
202
204
 
203
205
  .dropdown{
204
206
 
@@ -288,23 +290,23 @@
288
290
 
289
291
 
290
292
 
291
- var article = document.getElementsByTagName('article');
293
+ var article = document.getElementsByTagName('article')[0];
292
294
 
293
295
  atricle.style.left-margin = '210px';
294
296
 
295
- atrticlefloat: left;
297
+ atrticle.style.float = 'left';
296
-
297
-
298
-
298
+
299
+
300
+
299
- var h1 = document.getElementsByTagName('h1');
301
+ var h1 = document.getElementsByTagName('h1')[0];
300
302
 
301
303
  h1.style.margin = '15px';
302
304
 
303
- h1.style.font-size: '3.0vw';
305
+ h1.style.font-size = '3.0vw';
304
-
305
-
306
-
306
+
307
+
308
+
307
- var h3 = document.getElementsByTagName('h3');
309
+ var h3 = document.getElementsByTagName('h3')[0];
308
310
 
309
311
  h3.style.textDecoration = 'underline';
310
312
 
@@ -328,11 +330,11 @@
328
330
 
329
331
 
330
332
 
331
- var footer = document.getElementsByTagName('footer');
333
+ var footer = document.getElementsByTagName('footer')[0];
332
334
 
333
335
  footer.style.clear = 'left';
334
336
 
335
- footer.style.margin-left = '200px';
337
+ footer.style.margin-left = '200px';
336
338
 
337
339
  </script>
338
340