ページスタイル
ページスタイル
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD.xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta HTTP-EQUIVE="Content-Type" CONTENT="text/html;charset=utf-8" />
<title>ページのスタイルを変更</title>
<!-- ページスタイル -->
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/classmate10.js" type="text/Javascript"></script>
</head>
<body>
<h3 id=pagetitle>タイトルを表示</h3><br />
<input type=button id=changePageStyle name=changePageStyle value="スタイル変更" /><br />
<div id=divstyle class="standard">
ブラウザをロードすると「changePageStyle」が読み込まれます。<br />
ボタンをクリックするとjavascriptで登録された無名関数により<br />
ページのスタイルを変更します。<br />
ページのスタイルは順次変更されます。<br />
</div>
</body>
</html>
<!--
classmate10.js
Event.observe(window, 'load', changeStyle);
//スタイルを変更する番号を変数として準備する
var styleNo = 1;
//スタイルを5個分準備する
//このスタイルを順次変更する
var style1={
style_BodyBackgroundColor : 'White',
style_border : 'Black',
style_backgroundColor : 'LavenderBlush',
style_divFontSize : '10px',
style_divBackgroundColor : 'Snow',
style_value : 'スタイル変更'
};
var style2={
style_BodyBackgroundColor : 'LightPink',
style_border : 'dashed HotPink',
style_backgroundColor : 'OldLace',
style_divFontSize : '12px',
style_divBackgroundColor : 'Bisque',
style_value : 'ピンク系統'
};
var style3={
style_BodyBackgroundColor : 'Honeydew',
style_border : 'MediumSlateBlue',
style_backgroundColor : 'LightCyan',
style_divFontSize : '14px',
style_divBackgroundColor : 'CornflowerBlue',
style_value : '青色系統'
};
var style4={
style_BodyBackgroundColor : 'GreenYellow',
style_border : 'Green',
style_backgroundColor : 'PaleGreen',
style_divFontSize : '16px',
style_divBackgroundColor : 'SeaGreen',
style_value : '緑色系統'
};
var style5={
style_BodyBackgroundColor : 'Khaki',
style_border : 'Yellow',
style_backgroundColor : 'Gold',
style_divFontSize : '18px',
style_divBackgroundColor : 'LightYellow',
style_value : '黄色系統'
};
//スタイルを変更するためのオブジェクトを準備する
var pageStyle = style1;
//ページをロードするとき読み込まれるメソッド
function changeStyle()
{
//登録する無名関数
//ボタンをクリックしたときの動作
Event.observe(
'changePageStyle',
'click',
function()
{
//ページのスタイルを変更する処理
switch(styleNo)
{
case 1:
pageStyle = style1;
break;
case 2:
pageStyle = style2;
break;
case 3:
pageStyle = style3;
break;
case 4:
pageStyle = style4;
break;
case 5:
pageStyle = style5;
break;
}
//次のページのスタイルを変更
//順次変更する
styleNo++;
//スタイルが5個を超えた場合は初期値の「1」に戻す
if(styleNo > 5)
{
styleNo = 1;
}
//ページのスタイルを変更
setStyle(pageStyle);
}
);
}
//ページのスタイルを変更
function setStyle(pageStyle)
{
//画面の背景
document.body.style.backgroundColor = pageStyle.style_BodyBackgroundColor;
//タイトルの境界線
$("pagetitle").style.border = pageStyle.style_border;
//タイトルの背景
$("pagetitle").style.backgroundColor = pageStyle.style_backgroundColor;
//divの文字サイズ
$("divstyle").style.fontSize = pageStyle.style_divFontSize;
//divの背景
$("divstyle").style.backgroundColor = pageStyle.style_divBackgroundColor;
//ボタンの文字列
$("changePageStyle").value = pageStyle.style_value;
}
--------------------------------------------------
-->
|
|