現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

ドキュメント

【JavaScript入門】document.fgColorとは?文字色の取得・変更方法と注意点を初心者向けに解説

投稿日:2019年4月27日 更新日:

JavaScriptのdocument.fgColorとは?文字色の取得・変更方法を初心者向けに解説

document.fgColor は、HTML ドキュメント全体の文字色(前景色)を取得・変更するためのプロパティです。
現在ではあまり使われませんが、JavaScript の基礎を理解するうえで知っておくと役立ちます。



document.fgColorとは?

document.fgColor は、ページ全体の文字色(foreground color)を参照・設定するためのプロパティです。

document.fgColor = “red”;
document.fgColor = “#808080”;
colorValue = document.fgColor;

指定できる色の形式:

  • 色名(例:"red""blue"
  • 16進数カラーコード(例:"#808080"
  • RGB値(例:"rgb(255,0,0)")※一部ブラウザでは非対応

このプロパティを使えば、ユーザーの選択や時間帯に応じて文字色を変えるといった動的な演出も可能です。



使用例

例1:文字色をグレーに変更する

document.fgColor = “#808080”;

→ ページ全体の文字色がグレーになります。

例2:現在の文字色を取得する

fgColor = document.fgColor;

→ 現在設定されている文字色が変数 fgColor に代入されます。

前景色(foreground color)とは?

文字色は「前景色(foreground color)」と呼ばれ、背景色(background color)と対になる概念です。

fgColorforeground color の略で、
ページ内の文字の色を指しています。

現代では非推奨のプロパティ

document.fgColor は古い仕様で、現在の Web 開発ではほとんど使用されません。

代わりに、CSS を使って文字色を変更するのが一般的です。

document.body.style.color = “#808080”;

→ こちらの方が現代的で推奨される方法です。



まとめ

  • document.fgColor はページ全体の文字色を取得・変更するプロパティ
  • 色名・16進数カラーコードなどで指定できる
  • foreground color(前景色)の略
  • 現在は CSS を使う方法が推奨される

関連リンク

-ドキュメント
-

執筆者:

関連記事

【JavaScript入門】document.writeとdocument.writelnの使い方|違い・注意点・HTML出力の仕組みを解説

JavaScriptのdocument.writeとdocument.writelnとは?使い方・違い・注意点を初心者向けに解説 document.write() と document.writeln …

【JavaScript入門】document.getSelectionとは?選択中の文字列を取得する方法を初心者向けに解説

JavaScriptのdocument.getSelectionとは?選択中の文字列を取得する方法を初心者向けに解説 document.getSelection() は、ユーザーがマウスやキーボード操 …

【JavaScript入門】document.domainとは?ドメイン名の取得方法と使い方を初心者向けに解説

JavaScriptのdocument.domainとは?ドメイン名の取得方法と使い方を初心者向けに解説 document.domain は、現在表示している HTML ドキュメントが属する「ドメイン …

【JavaScript入門】linkColor・alinkColor・vlinkColorとは?リンク色の変更方法と注意点を初心者向けに解説

JavaScriptのlinkColor・alinkColor・vlinkColorとは?リンク色の変更方法を初心者向けに解説 document.linkColor、document.alinkCol …

【JavaScript入門】document.titleとは?ページタイトルの取得・変更方法を初心者向けに解説

JavaScriptのdocument.titleとは?ページタイトルの取得・変更方法を初心者向けに解説 document.title は、HTML 文書の <title> タグに設定され …