javascriptの変数に関してです。

質問

onclickでhtmlの文章を書き換えたいのです。
var sample1="サンプル１です"
var sample2="サンプル２です"
var sample3="サンプル３です"
....
var sample10="サンプル１０です"

function kakikae('sample') {
document.getElementById('kakikaeruBasyo').innerHTML=sample;
}
このようにして、１０通りの文章をテキスト領域に書き換えて表示することができるようになったんですが、htmlでテキストの大きさなどを変更して表示したいのですが、
var sample1="<h1>サンプル1です</h1>"
のように書く事はできないですよね・・・？どうしたら変数の中身にcssなどを適用できますか？・・・初心者なので、何を言ってるのか分かりにくいかと思いますが、お願いします＞＜

回答No.1

yambejp

h1タグは大きさを変更するためのタグじゃないのでそのやり方は
やめた方がいいでしょう。こんな感じじゃない？

<script>
var sample=[
{text:"サンプル１です",fontsize:"12px"}
,{text:"サンプル２です",fontsize:"20px"}
,{text:"サンプル３です",fontsize:"30px"}
];

function kakikae(num) {
var n=document.getElementById('kakikaeruBasyo');
n.innerHTML=sample[num].text;
n.style.fontSize=sample[num].fontsize;
}
</script>
<input type="button" value="1" onclick="kakikae(0)">
<input type="button" value="2" onclick="kakikae(1)">
<input type="button" value="3" onclick="kakikae(2)">
<div id="kakikaeruBasyo"></div>