JavaScriptでテキストやリンクの色が指定できない

##前提・解決したいこと
ブラウザ　Chrome　Firefox
JavaScriptを学習中です。テキストやリンクの色を指定するということを行っていたのですが、色を指定してもそれが反映されません。
例えば、

document.fgColor="white";

と指定しても白い文字になりません。
どのようにすれば指定した色が反映されるのでしょうか？
アドバイスをいただければ幸いです。

##実行したコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> 
</script>
</head> <body bgcolor="#000000"> <p>*テキストやリンクの色を指定する</p> ・テキストの色は白<br> <a href="https://www.rakuten.co.jp/category/sweets/">リンク色は緑。</a><br> <a href="https://aajapan.org/"> すでに行ったことのあるリンクは黄色。</a><br> <a href="#"> リンクをクリックしたときの色は黒。</a><br> </body></html>

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

回答2件

ベストアンサー

JavaScriptでテキストやリンクの色が指定できない

JavaScriptではなく、スタイルシートを使ってください。

JavaScriptを学習中です

古い教材では、廃止されたプロパティを利用したコードに出会うことがあります。

参考にしている教材（書籍であれば出版年月日、ウェブページであれば更新日時）を確認するとともに
「MDN (プロパティ名)」で検索し、廃止されていないかどうかを確認しましょう。
（更新日時を開示していないウェブページは、「文責を放棄した」とみなして差し支えありません）。

MDN

いずれのページにも、明記されています。

HTML 4.01 で非推奨
DOM Level 2 HTML では非推奨
この機能は突然動作しなくなる可能性がある

また

CSS で代替されました

とあります。

繰り返しますが、JavaScriptではなく、スタイルシートを使ってください。

追記）

JavaScript で動的に <style> を加える例
（通常は外部化したスタイルシートを扱います）

html
1<script>
2
3var mySheet = document.createElement("style");
4
5// LVHA 順(疑似セレクタは ":link"、":visited"、":hover"、":active" の順）で定義
6mySheet.textContent = `
7body { background-color: black;　color:white; }
8a:link { color: green; }
9a:visit { color: yellow; }
10a:active { color:black; }
11`;
12document.querySelector("head").appendChild( mySheet );
13
14</script>
15<!-- typo 修正：
16 backgroundColor => background-color
17 -->

他にも、CSSOM を使う方法があります（難しい手法になりますので、説明は割愛します）。

投稿2020/09/15 23:10

編集2020/09/16 01:23

AkitoshiManabe

総合スコア5434

syosi_pyrbph

2020/09/16 07:33

なるほど、次回からその機能が廃止されていないかという点も自分で確認してみるようにします。調べてくださってありがとうございます。

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

適切な回答ではなかったので打ち消し線を引かせていただきました．
他の方のおっしゃるように CSS を用いるのが良いでしょうし，JavaScript で動的にいじるにしても，ES2015 以降構文を使うのが筋でした．

下のように syntax highlight (構文ごとに色をつける機能) をつけるとわかりやすいと思いますが，JavaScript を書く部分がまとめてコメントアウトされています．

まずはこのを消すと良いと思います．

~~エディタも syntax highlight を有効にすると良いでしょう．~~

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>javascript</title>
6<script type="text/javascript">
7<!--
8
9    document.fgColor="white";
10    document.linkColor="green";
11    document.vlinkColor="#ffff00";
12    document.alinkColor="#000000";
13
14//-->
15</script>
16
17</head>
18
19<body bgcolor="#000000">
20
21<p>*テキストやリンクの色を指定する</p>
22・テキストの色は白<br>
23<a href="https://www.rakuten.co.jp/category/sweets/">リンク色は緑。</a><br>
24<a href="https://aajapan.org/">
25すでに行ったことのあるリンクは黄色。</a><br>
26<a href="#">
27リンクをクリックしたときの色は黒。</a><br>
28
29</body></html>

投稿2020/09/15 15:47

編集2020/09/16 02:33

u-sho

総合スコア110

u-sho

2020/09/15 15:50

syntax highlight を有効に使うことで「ミスを減らす」という意味であって，syntax highlight が効いていないせいで動かないわけではないです．念のため．

ikadzuchi

2020/09/16 01:05

scriptタグの中身をコメントアウトするのはJavascript非対応の環境を考慮する必要があった大昔に一般的だった書き方で、間違っているわけではありません。(ECMAScript2015でも後方互換性のため追認されて1行コメント扱いになっているようです)

u-sho

2020/09/16 02:25

script タグの中はそもそも HTML としてパースされないのをうっかりしていました．実際に動作確認を怠ったためですね．恥入るばかりです． HTML3.2 で script タグの中は将来的にレンダリングされなくなることが示され，HTML4.01 で非推奨となったのですね．ES2015/HTML5 以降しか知らなかったので，勉強になりました．

syosi_pyrbph

2020/09/16 07:35

ありがとうございました。リンクの色などはJavaScriptではなくスタイルシートで指定しようと思います。

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

あなたの回答