Documentオブジェクトドキュメント情報(タイトル、最終更新日、直前のURL、色)の取得
- 背景色の指定・取得〔bgColorプロパティ〕
- 文字色、インク色の指定・取得〔fgColorプロパティ〕
- ページのタイトルを取得〔titleプロパティ〕
- ページのドメイン名を取得〔domainプロパティ〕
- ページの最終更新日時を取得〔lastModifiedプロパティ〕
- 現在のページのURLを取得〔locationプロパティ/URLプロパティ〕
- 直前のURLを取得〔referrerプロパティ〕
- 現在のページのリンクを生成
背景色の指定・取得
bgColorプロパティ
unknown
document.bgColor = <色>
bgColorプロパティは、Webページの背景色を設定または取得します。 色の指定は、色名または色指定値(#rrggbb形式)で指定します。
背景色を取得
サンプルを見る
<script type="text/javascript"> var myBgColor=document.bgColor; document.write("現在のページの背景色:<em>"+myBgColor+"<\/em>"); </script>
背景色をフェードイン
サンプルを見る
<script type="text/javascript"> /* 背景色をフェードイン(FireFoxでは動作しません) */ function chgBgColor(){ color="0123456789abcdef"; for(i=0; i<16; i++){ c=color.charAt(i); document.bgColor="#"+c+c+c+c+c+c; for(j=0; j<100000; j++){ /* 一瞬でフェードインしてしまうため、ダミーループで時間稼ぎ */ } } } window.onload=chgBgColor; </script> <form> <input type="button" value="フェードイン" onclick="chgBgColor()" /> </form>
文字色、インク色の指定・取得
fgColorプロパティ
unknown
document.fgColor = <色>
document.linkColor = <色>
document.alinkColor = <色>
document.vlinkColor = <色>
document.linkColor = <色>
document.alinkColor = <色>
document.vlinkColor = <色>
Colorプロパティは、Webページの文字色を設定または取得します。 色の指定は、色名または色指定値(#rrggbb形式)で指定します。
プロパティ | 説明 |
---|---|
fgColor | 文字色の取得・指定 |
linkColor | リンク色の取得・指定 |
alinkColor | マウスが乗った時のリンク色の取得・指定 |
vlinkColor | 訪問済みリンク色の取得・指定 |
文字色・リンク色を取得
<script type="text/javascript"> document.write("文字色:<em>"+document.fgColor+"<\/em><br \/>"); document.write("リンク色:<em>"+document.linkColor+"<\/em><br \/>"); document.write("マウスが乗った時のリンク色:<em>"+document.alinkColor+"<\/em><br \/>"); document.write("訪問済みリンク色:<em> "+document.vlinkColor+"<\/em>"); </script>
文字色・リンク色を変更
サンプルを見る
<script type="text/javascript"> function chgColor(){ document.fgColor="orange"; document.linkColor="#ff0000"; document.alinkColor="aqua"; document.vlinkColor="blue"; } </script> <form> <p>文字色・リンクの色をdocumentオブジェクトのfgColor/linkColor/alinkColor/vlinkColorプロパティを使用して変更します。</p> <p><a href="#">リンク1</a> <a href="#">リンク2</a></p> <input type="button" value="文字色・リンク色変更" onclick="chgColor()" /> </form>
ページのタイトルを取得
titleプロパティ
unknown
document.title
titleプロパティは、現在のページのタイトル(title要素の中身)を取得します。
<script type="text/javascript"> var myTitle=document.title; document.write("現在のページのタイトル:<br \/><em>"+myTitle+"<\/em>"); </script>
ページのドメイン名を取得
domainプロパティ
unknown
document.domain
domainプロパティは、現在のページのドメイン名を取得します。
サンプルを見る
<script type="text/javascript"> var myDomain=document.domain; document.write("現在のページのドメイン:<em>"+myDomain+"<\/em>"); </script>
ドメインごとに処理を切り替え
取得したドメイン名によって、異なるリンクや広告を表示するなど、実行する処理を切り替えることもできます。
サンプルを見る
<script type="text/javascript"> var myDomain=document.domain; console.log(myDomain); var siteA="phpjavascriptroom.com"; var siteB="blog.phpjavascriptroom.com"; if(myDomain==siteA){ document.write("ミラーサイト:<a href='http://"+siteA+"'>"+siteA+"<\/a>"); }else if(myDomain==siteB){ document.write("ミラーサイト:<a href='http://"+siteB+"'>"+siteB+"<\/a>"); }else{ document.write("ミラーサイト:<a href='http://"+siteA+"'>"+siteA+"<\/a><br \/>"); document.write("ミラーサイト:<a href='http://"+siteB+"'>"+siteB+"<\/a>"); } </script>
ページの最終更新日時を取得
lastModifiedプロパティ
unknown
document.lastModified
<script type="text/javascript">
/* 現在のページの最終更新日時を取得 */
document.write("現在のページの最終更新日時: <em>"+document.lastModified+"<\/em>\n");
</script>
現在のページのURLを取得
locationプロパティ/URLプロパティ
unknown
document.location
document.URL
document.URL
<script type="text/javascript"> /* locationプロパティ使用 */ var myLocation=document.location; document.write("現在のページのURL:<br \/><em>"+myLocation+"<\/em><br \/>"); /* URLプロパティ使用 */ var myURL=document.URL; document.write("現在のページのURL:<br \/><em>"+myURL+"<\/em>"); </script>
直前のURLを取得
referrerプロパティ
unknown
document.referrer
referrerプロパティは、現在のページを開く一つ前のページのURLを取得します。
サンプルを見る
<script type="text/javascript"> var myReferrer=document.referrer; document.write("1つ前に見ていたページのURL:<br \/><em>"+myReferrer+"<\/em>"); </script>
強制的にトップページへ飛ばす
検索結果からのアクセスなど、トップページ以外のURLへアクセスされることがあります。 常にトップページにアクセスしたい場合は、referrerプロパティで直前のURLを取得し、取得した値がトップページでないなら、トップページへ飛ばすことができます。
トップページ以外からアクセスされたくない場合、下記のソースをトップページ以外のhead要素内に記述しておけば、 トップページ以外からのアクセスは、強制的にトップページへ飛ばされます。
<html> <head> <script type="text/javascript"> var url; function chkRef(){ var url=document.referrer; /* トップページ以外のURLへアクセスされた場合は、強制的にトップページへ移動 */ if(url!="トップページのURL"){ location.href("トップページのURL"); } } /* body要素のonload属性に指定せずに、JavaScript内でonLoadイベントを指定する場合 window.onload=chkRef */ </script> </head> <body onload="chkRef()"> ・・・ </body> </html>
現在のページのリンクを生成
unknown
<script type="text/javascript"> function createPageLink(){ var pageURL=document.location.href; var pageTITLE=document.title; var strLink="<a href='"+pageURL+"' title='"+pageTITLE+"'>"+pageTITLE+"<\/a>"; document.frmtips1.elements["outputTxt"].value=strLink; if(document.all){ /* IE */ window["outputDIV"].innerHTML=strLink; }else if(document.getElementById){ /* NN6, Firefox */ document.getElementById("outputDIV").innerHTML=strLink; }else if(document.layers){ /* NN4 */ document.layers["outputDIV"].document.open(); document.layers["outputDIV"].document.write(strLink); document.layers["outputDIV"].document.close(); } } </script> <form name="frmtips1" action="#"> <p><input type="button" value="現在のページのリンクを生成" onclick="createPageLink()" /></p> <p><input type="text" value="" name="outputTxt" size="60" /></p> 確認:<div id="outputDIV"></div> </form>