Javascriptでhtml中のテキストを変更する

初歩的な技術ではありますが、備忘録エントリー。
HTML要素を参照するには、innerHTML を使用します。

obj.innerHTML
obj.innerHTML = "HTMLタグおよびテキスト"

サンプル

<script type="text/javascript">
<!--
var txt1 = "赤は英語で<strong>red</strong>です";
var txt2 = "青は英語で<strong>blue</strong>です";
var txt3 = "黄色は英語で<strong>yellow</strong>です";

function ChangeTxt(txt) {
	document.getElementById("text").innerHTML=txt;
}
-->
</script>
<style type="text/css">
<!--
body{
	padding:10px;
	font-size:12px;
}
-->
</style>
</head>

<body>
<div id="text">ここの文章を変える</div>
<ul>
	<li><a href="javascript:void(0)" onclick="ChangeTxt(txt1); return false;">赤</a></li>
	<li><a href="javascript:void(0)" onclick="ChangeTxt(txt2); return false;">青</a></li>
	<li><a href="javascript:void(0)" onclick="ChangeTxt(txt3); return false;">黄色</a></li>
</ul>
</body>

サンプル

B!

Comment

コメント(0)

コメントはまだありません。

コメントする

Trackback(0)