| 違反投稿 |
ちょっと内容は違うのですが、div(span)の内容にタグを入れて書き換えるのではなく、スタイルをいじった方が正攻法な気がするので、そちらのコードを示します。
JS部分：
function changeStyle(col,stl){
dgText=document.getElementById('text');
if(col!="")
dgText.style.color=col;
if(stl=="u")
dgText.style.textDecoration="underline";
else if(stl=="i")
dgText.style.fontStyle="italic";
else if(stl=="b")
dgText.style.fontWeight="bold";
else if(stl=="r"){//RESET
dgText.style.color="#000000";
dgText.style.textDecoration="none";
dgText.style.fontStyle="normal";
dgText.style.fontWeight="normal";
}
}
使用例：
<input type="button" value="太字" onClick="changeStyle('','b');">
<input type="button" value="斜体" onClick="changeStyle('','i');">
<input type="button" value="アンダーライン" onClick="changeStyle('','u');">
<input type="button" value="緑" onClick="changeStyle('#00FF00','');">
<input type="button" value="リセット" onClick="changeStyle('','r');">
changeStyle(arg1,arg2)は、arg1に色、arg2にスタイルを指定します。
onClick="changeStyle('#FFFFFF','b');"
とすると、id="text"が、白の太字になります。
arg2に使えるのは、
'u':アンダーライン
'b'：太字
'i'：イタリック
'r'：リセット
です。他は無視されます。
もし、onClickの部分を全部全く同じに書きたいというのであれば、thisを関数に渡してあげて、this.valueでボタンのラベル名を判断してやれば、統一することもできますが、ラベルを変えたときに関数側も変更しなければならなくなるので、やっていません。 |
