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>