大　 中　 小　 赤　 青　 黒

• テキスト入れ替え
• テキスト入れ替え2

この部分を入れ替えます。

HTML

<p>
<a href="#" id="large">大</a>　
<a href="#" id="mid">中</a>　
<a href="#" id="small">小</a>　
<a href="#" id="red">赤</a>　
<a href="#" id="blue">青</a>　
<a href="#" id="black">黒</a>
</p>
<ul>
<li><a href="#" id="text1">テキスト入れ替え</a></li>
<li><a href="#" id="text2">テキスト入れ替え2</a></li>
</ul>

<p id="test">この部分を入れ替えます。</p>

Javascript

function $ge(e){return document.getElementById(e);}

function changeFontLarge(){testID.style.fontSize='18px';}
function changeFontMid(){testID.style.fontSize='14px';}
function changeFontSmall(){testID.style.fontSize='10px';}
function changeColorRed(){testID.style.color="red";}
function changeColorBlue(){testID.style.color="blue";}
function changeColorBlack(){testID.style.color="black";}

function show1(){
var nexttext = "test1で入れ替えています。";
testID.innerHTML = nexttext;
}
function show2(){
var nexttext='test2で入れ替えました。<br />';
nexttext += '<a href="http://www.anchortag.jp/" target="_blank">リンクもこの通りです。</a>';
testID.innerHTML = nexttext;
}

window.onload=function(){
testID=$ge('test');

$ge('large').onclick = changeFontLarge;
$ge('mid').onclick = changeFontMid;
$ge('small').onclick = changeFontSmall;
$ge('red').onclick = changeColorRed;
$ge('blue').onclick=changeColorBlue;
$ge('black').onclick=changeColorBlack;
$ge('text1').onclick=show1;
$ge('text2').onclick=show2;
}