javascriptで文字サイズ変更-cssが効かない
こちらのサイトのスクリプトを使用してやってみています。
http://www.nrym.org/storeroom/neta/01_fontsize/
line-heightを各サイズで指定したいのと、このスクリプトでは縮小率拡大率％指定になっているのですが、これをピクセル指定にしたいのです。
そこで下記のように書き換えました。
fontchanger.js
------------------------------------------
show: function() {
var id = this.id;
document.writeln([
'<div id="' + id + '">',
'<img src="moji.gif" width="50" height="20" alt="文字の大きさ" class="moji" />',
'<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする"><img src="moji_s.gif" width="20" height="20" alt="小" class="moji" /></a>',
'<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す"><img src="moji_m.gif" width="20" height="20" alt="中" class="moji" /></a>',
'<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする"><img src="img/size_l.gif" width="20" height="20" alt="大" class="moji" /></a>',
'</div>'
].join("\n"));
Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this));
Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this));
Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this));
},
onClickSmall: function(e) { this.change('10px' ); },
onClickMedium: function(e) { this.change('12px'); },
onClickLarge: function(e) { this.change('14px'); }
};
css
-------------------------------------------------
body{
font-size:12px;
line-height:14px;
}
#fffsss{
width:100px;
margin:0;
padding:0;
}
#fontChanger{
}
#fontChanger-small{
font-size:10px;
line-height:12px;
}
#fontChanger-medium{
font-size:12px;
line-height:14px;
}
#fontChanger-large{
font-size:14px;
line-height:16px;
}
html
-------------------------------
<div id="fffsss">
<script type="text/javascript">
<!--
FontChanger.start('js/fontChanger');
//-->
</script>
</div>
-----------------------------------------------------
これがサイズは変更できるのですが、cssが効きません。
line-heightを指定できて、単位は全てピクセルにするにはどうしたらいいでしょうか？よろしくお願い致します。
お礼
ありがとうございます。バッチリできました！