\r\n> \r\n> \r\n> \r\n> \r\n> \r\n>

*テキストやリンクの色を指定する

\r\n> ・テキストの色は白
\r\n> リンク色は緑。
\r\n> \r\n> すでに行ったことのあるリンクは黄色。
\r\n> \r\n> リンクをクリックしたときの色は黒。
\r\n> \r\n> \r\n> ","answerCount":2,"upvoteCount":0,"datePublished":"2020-09-15T09:32:00.185Z","dateModified":"2020-09-15T09:32:00.185Z","acceptedAnswer":{"@type":"Answer","text":"> JavaScriptでテキストやリンクの色が指定できない\r\n\r\n**JavaScriptではなく、スタイルシートを使ってください**。\r\n\r\n> JavaScriptを学習中です\r\n\r\n古い教材では、廃止されたプロパティを利用したコードに出会うことがあります。\r\n\r\n参考にしている教材（書籍であれば出版年月日、ウェブページであれば更新日時）を確認するとともに\r\n「MDN (プロパティ名)」で検索し、廃止されていないかどうかを確認しましょう。\r\n（更新日時を開示していないウェブページは、「文責を放棄した」とみなして差し支えありません）。\r\n\r\nMDN\r\n\r\n* [bgColor](https://developer.mozilla.org/ja/docs/Web/API/Document/bgColor)\r\n* [fgColor](https://developer.mozilla.org/ja/docs/Web/API/Document/fgColor)\r\n* [linkColor](https://developer.mozilla.org/ja/docs/Web/API/Document/linkColor)\r\n* [vlinkColor](https://developer.mozilla.org/ja/docs/Web/API/Document/vlinkColor)\r\n* [alinkColor](https://developer.mozilla.org/ja/docs/Web/API/Document/alinkColor)\r\n\r\nいずれのページにも、明記されています。\r\n1. HTML 4.01 で非推奨\r\n2. DOM Level 2 HTML では非推奨\r\n3. この機能は突然動作しなくなる可能性がある\r\n\r\nまた\r\n> CSS で代替されました\r\n\r\nとあります。\r\n\r\n繰り返しますが、**JavaScriptではなく、スタイルシートを使ってください**。\r\n\r\n----\r\n追記）\r\n\r\nJavaScript で 動的に ``
質問するログイン新規登録
トップChromeに関する質問JavaScriptでテキストやリンクの色が指定できない

Q&A

解決済

2回答

1398閲覧

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

syosi_pyrbph
syosi_pyrbph

総合スコア6

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/09/15 09:32

0

0

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

document.fgColor="white";

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

##実行したコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> <!-- 
document.fgColor="white";
document.linkColor="green";
document.vlinkColor="#ffff00";
document.alinkColor="#000000";

//-->
</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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2件

0

ベストアンサー

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

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

JavaScriptを学習中です

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

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

MDN

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

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

また

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
AkitoshiManabe

総合スコア5434

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

syosi_pyrbph
syosi_pyrbph

2020/09/16 07:33

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

0

適切な回答ではなかったので打ち消し線を引かせていただきました．
他の方のおっしゃるように 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
u-sho

総合スコア110

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

u-sho
u-sho

2020/09/15 15:50

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

2020/09/16 01:05

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

2020/09/16 02:25

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

2020/09/16 07:35

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップChromeに関する質問

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