CSSを使わずにJavaScriptでWebページの装飾を書く方法について②

前提・実現したいこと

innerHTML,CSSを使わずに、HTMLとJavaScriptだけでWebページを書こうとしています。
前回の質問でご回答をいただいた上で、発生している問題が変化したので
再度質問させていただきます。
前回の質問

発生している問題・エラーメッセージ

HTMLとJavaScriptを組み合わせたコード（samplejs.html)で
該当のソースコード（sample.htmlとsample.css）で表示するものと同じページを表示させたいです。
しかし、以下の２点で問題があり、同じページは表示できていない状態です。
どのように修正すれば良いかアドバイスをいただきたいです。

var header = document.getElementsByTagName('header');
    for (var i = 0; i < header.length; i++) {
    header[i].style['text-align'] = 'center';  //header .style['text-align']?
    header[i].style.height = '100px';
    }

    
      var body = document.getElementsByTagName('body');
      for (var i = 0; i < body.length; i++) {
      body[i].style.line-height = '2.0';
      }

具体的には、上記の部分でvar bodyを追加すると、var headerの設定が表示されなくなってしまうという問題に直面しています。

また、HTMLの以下の部分にあたり

<nav class ="dropdown">

CSSで以下の様に

dropdown h2{
    text-align: center;
    background-color: #ffff58;
    margin: 0;
    padding: 12px 16px;
}

.dropdown ul{
    display: none;
    position: absolute;
    background-color: rgb(100, 100, 255);
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 1;
}

と設定した部分に関しては、以下の様にdocument.getElementsByTagNameで取得できるのか、

      var .dropdown ul = document.getElementsByTagName('.dropdown ul');

もしくは他のメソッドを使用する方法があるのか調べてもわからなかったため、
JavaScriptでWebページの装飾を各部分でもCSSのままで記述してあります。

#該当のソースコード
samplejs.html

<!DOCTYPE html>
<html lang = "ja">
<head>
	<meta charset= "utf-8">
	<title>サンプルページ</title>
	
</head>

<body>
	<header>
	<h1>サンプルページ</h1>
	</header>

	<nav class ="dropdown">
		<h2>メニュー</h2>
		<ul>
			<li><a href ="no1.html">その１</a></li>
			<li><a href ="no2.html">その２</a></li>
			<li><a href ="no3.html">その３</a></li>
		</ul>
	</nav>

	<article>
	<h2>内容１</h2>
	<p>文章１</p>
	<br>
	<h2>内容２</h2>
	<p id = "paragraph1">行１
	<br>行２
	<br>行３</p>
	<br>
	<h3>内容3</h3>
	<p id = "paragraph2">行１
		<br>行２</p>
		<ul>
		<ol>
			<li>項目１</li>
			<li>項目２</li>
		</ol>
		</ul>

	<form>
	<h2>フォーム</h2>
		<div>
			<lavel>氏名：<input type="text" size="15" name="name"></lavel><br>
			<label>問い合わせ内容：<input type="text" size="20" name="question"></label><br>
			<input type="submit" value="submit">
		</div>
	</form>

	</article>

	
	<footer>
		<ul>
			<a href ="page1.html">他のページ１</a>
			<a href ="page2.html">他のページ２</a>
		</ul>
		<small>Copyright &copy; </small>
	</footer>

<!-- JavaScriptで装飾指定 -->
	<script>
	var header = document.getElementsByTagName('header');
	for (var i = 0; i < header.length; i++) {
	header[i].style['text-align'] = 'center';  //header .style['text-align']?
	header[i].style.height = '100px';
	}

  	var body = document.getElementsByTagName('body');
  	for (var i = 0; i < body.length; i++) {
  	body[i].style.line-height = '2.0';
 	 }

	var nav = document.getElementsByTagName('nav');
	for (var i = 0; i < nav.length; i++) {
  	nav[i].style.float = 'left';
	nav[i].style.width ='200px';
  	}	
	

	var article = document.getElementsByTagName('article')[0];
	atricle.style.left-margin = '210px';
	atrticle.style.float = 'left'; 

	var h1 = document.getElementsByTagName('h1')[0];
	h1.style.margin = '15px';
	h1.style.font-size = '3.0vw';

	var h3 = document.getElementsByTagName('h3')[0];
  	h3.style.textDecoration = 'underline';  


  	var footer = document.getElementsByTagName('footer')[0];
  	footer.style.clear = 'left';
	footer.style.margin-left = '200px'; 

	</script>

</body>
</html>

sample.html

HTML
1<!DOCTYPE html>
2<html lang = "ja">
3<head>
4	<meta charset= "utf-8">
5	<title>サンプルページ</title>
6	<link rel="stylesheet" href="sample.css" type="text/css" />
7</head>
8
9<body>
10	<header>
11	<h1>サンプルページ</h1>
12	</header>
13		
14	<!-- menu -->
15	<nav class ="dropdown">
16		<h2>メニュー</h2>
17		<ul>
18			<li><a href ="no1.html">その１</a></li>
19			<li><a href ="no2.html">その２</a></li>
20			<li><a href ="no3.html">その３</a></li>
21		</ul>
22	</nav>
23
24	<!-- main content -->
25	<article>
26	<h2>内容１</h2>
27	<p>文章１</p>
28	<br>
29	<h2>内容２</h2>
30	<p id = "paragraph1">行１
31	<br>行２
32	<br>行３</p>
33	<br>
34	<h3>内容3</h3>
35	<p id = "paragraph2">行１
36		<br>行２</p>
37		<ul>
38		<ol>
39			<li>項目１</li>
40			<li>項目２</li>
41		</ol>
42		</ul>
43
44	<form>
45	<h2>フォーム</h2>
46		<div>
47			<lavel>氏名：<input type="text" size="15" name="name"></lavel><br>
48			<label>問い合わせ内容：<input type="text" size="20" name="question"></label><br>
49			<input type="submit" value="submit">
50		</div>
51	</form>
52
53	</article>
54
55	
56	<footer>
57		<ul>
58			<a href ="page1.html">他のページ１</a>
59			<a href ="page2.html">他のページ２</a>
60		</ul>
61		<small>Copyright &copy; </small>
62	</footer>
63
64</body>
65</html>

sample.css

css
1header{
2	height: 100px;
3	text-align: center; 
4}
5
6
7body{
8	line-height: 2.0;
9}
10
11
12nav{
13	float: left;
14	width: 200px;
15}
16
17.dropdown{
18	position: relative;
19	width: 190px;
20}
21
22.dropdown h2{
23	text-align: center;
24	background-color: #ffff58;
25	margin: 0;
26	padding: 12px 16px;
27}
28
29.dropdown ul{
30	display: none;
31	position: absolute;
32	background-color: rgb(100, 100, 255);
33	box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
34	list-style-type: none;
35	margin: 0;
36	padding: 0;
37	z-index: 1;
38}
39
40.dropdown a{
41	display: block;
42	color: #000;
43	padding: 12px 16px;
44	text-decoration: none;
45	width: 158px;
46}
47
48.dropdown a:hover{
49	background-color: #555;
50	color: #fff;
51}
52
53.dropdown:hover h2{
54	background-color: rgb(100, 100, 255);
55}
56
57.dropdown:hover ul{
58	display: block;
59}
60
61article{
62	left-margin: 210px;
63	float: left;
64}
65
66
67
68h1{
69	margin: 15px;
70	font-size: 3.0vw;
71}
72
73
74h3{
75	text-decoration: underline;
76}
77
78/*訪問前後でリンクの文字色を指定*/
79a:visited{
80	color: rgb(255, 0, 0);
81}
82
83p em{
84	font-style: italic;
85	font-weight: bold;
86}
87
88
89footer {
90	clear: left;
91	margin-left: 200px; 
92}

補足情報（FW/ツールのバージョンなど）

ブラウザ：Google Chrome
Mac OS

x_x

2018/06/08 00:36

前回も質問しましたがなぜこんなことをしているのでしょうか？このまま続けても詳細度まで調べなければ同じ表示にはできません。

退会済みユーザー

2018/06/08 00:38

詳細度まで調べるとはどういう意味でしょうか。また、x_xさんのご提案いただいた方法でもdocument.styleSheetsを扱う場合でも、innerHTMLは使用しないということになりますでしょうか。

x_x

2018/06/08 00:40

innerHTMLがなぜ出てくるのか分かりません。わたしの提示コードにもなかったはずですが

x_x

2018/06/08 00:41

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

sousuke

2018/06/08 00:50

なんらかの要因でCSSを配置できないかCSSを適応できずに…ってところでしょうか？これをしなければいけない理由は私も聞きたいです。詳細度がわかったとしてもコードが複雑過ぎて申し訳ないが質問者さんの技量では別の問題でまた質問にきそうです。

退会済みユーザー

2018/06/08 00:57

かしこまりました。どれくらい難しいのか理解できておらず、方針を変えます。

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

回答2件

js
1// body[i].style.line-height = '2.0';
2// ↓
3   body[i].style['line-height'] = '2.0';

調べてもわからなかったため、

Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で何冊か本を買って読むと言う方法が良いと思います。

【document.querySelectorAll - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

【querySelector CSSセレクタで要素を取得 | JavaScript中級編】
https://wp-p.info/tpl_rep.php?cat=js-intermediate&fl=r4

投稿2018/06/08 00:23

kei344

総合スコア69407

ベストアンサー

今回の問題の直接的な回答ではないことを先に述べさせていただきます。

innerHTML,CSSを使わずに、HTMLとJavaScriptだけでWebページを書こうとしています。

ということであれば、一つ一つの要素のstyleにjsでセットすると管理も面倒なので、
動的にスタイルシートを生成(document.createElement("style"))し、insertRule(IEの場合addRule)していくというアプローチのほうが、既存のCSSからの移植性も高く、管理もCSSと同じ考え方でいけます。いかがでしょうか。

js
1var style = document.createElement("style");
2style.setAttribute("type", "text/css");
3document.getElementsByTagName("head")[ 0 ].appendChild(style);
4style.sheet.insertRule('header {height: 100px; text-align: center;}', 0);
5style.sheet.insertRule('a:visited {color: rgb(255, 0, 0);}', 0);