【JavaScript】document.bgColorなどの解説
document.bgColorについて
document.bgColor
は、HTMLドキュメントの背景色を設定または取得するためのプロパティです。このプロパティを使うと、ページ全体の背景色を動的に変更できます。ただし、現在では非推奨(deprecated)となっており、CSS
を使用することが推奨されています。
使用例
<script> document.bgColor = "lightblue"; // ページ背景を水色に設定 </script>
例: ボタンで背景色を変更
<button onclick="document.bgColor = 'yellow';">背景を黄色にする</button>
document.fgColorについて
document.fgColor
は、HTMLドキュメント内のテキストの色を設定または取得するためのプロパティです。このプロパティを使うと、ドキュメント全体の文字色を変更できますが、CSS
の使用が推奨されているため非推奨です。
使用例
<script> document.fgColor = "red"; // ページ内のテキストを赤色に設定 </script>
例: 入力ボックスで文字色を変更
<input type="color" onchange="document.fgColor = this.value;">
document.linkColorについて
document.linkColor
は、HTMLドキュメント内の未訪問リンクの色を設定または取得するためのプロパティです。このプロパティを使うと、リンクの色を統一できますが、こちらも現在ではCSS
を利用することが推奨されています。
使用例
<script> document.linkColor = "green"; // 未訪問リンクを緑色に設定 </script>
例: テーマ変更機能
<button onclick="document.linkColor = 'purple';">リンク色を紫にする</button>
document.alinkColorについて
document.alinkColor
は、HTMLドキュメント内のアクティブリンク(クリック中のリンク)の色を設定または取得するためのプロパティです。このプロパティはリンクがクリックされた瞬間の色を制御しますが、現在ではCSS
の:active
疑似クラスを使う方法が一般的です。
使用例
<script> document.alinkColor = "orange"; // アクティブリンクをオレンジ色に設定 </script>
例: アクティブリンクの強調
<a href="#" onmousedown="document.alinkColor = 'blue';">クリックして色変更</a>
document.vlinkColorについて
document.vlinkColor
は、HTMLドキュメント内の訪問済みリンクの色を設定または取得するためのプロパティです。訪問済みリンクの色を統一したい場合に使用されますが、現在ではCSS
の:visited
疑似クラスが推奨されています。
使用例
<script> document.vlinkColor = "gray"; // 訪問済みリンクを灰色に設定 </script>
例: 訪問済みリンクの色をボタンで変更
<button onclick="document.vlinkColor = 'pink';">訪問済みリンクをピンクにする</button>
まとめ
document.bgColor
、document.fgColor
、document.linkColor
、document.alinkColor
、document.vlinkColor
は、HTMLドキュメントの色設定に便利なプロパティですが、現在では非推奨となっています。代わりにCSS
を活用することで、より柔軟かつ推奨される方法でスタイルを設定できます。
これらのプロパティを使用している古いコードに遭遇した場合、可能であればCSS
に置き換えることを検討してください。