【JavaScript】document.bgColorなどの解説

【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.bgColordocument.fgColordocument.linkColordocument.alinkColordocument.vlinkColorは、HTMLドキュメントの色設定に便利なプロパティですが、現在では非推奨となっています。代わりにCSSを活用することで、より柔軟かつ推奨される方法でスタイルを設定できます。

これらのプロパティを使用している古いコードに遭遇した場合、可能であればCSSに置き換えることを検討してください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です