こもろぐ @tenkoma

What We Find Changes Who We Become -- Peter Morville著『アンビエント・ファインダビリティ 』

広告:本ブログで紹介している書籍等商品の紹介でAmazonアソシエイトを利用していることがあります。

フォントをその場で変える

<html>
<head><title>jQuery test</title></head>
<script src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<body>
<ul>
<li class="level1">レベル1見出し</li>
<li class="level2">レベル2見出し</li>
</ul>
<p>
<fieldset>
<legend>レベル1見出し</legend>
<label><input type="radio" name="level1" value="normal">普通って言うなぁ</label>
<label><input type="radio" name="level1" value="bold">太く生きる</label>
<label><input type="radio" name="level1" value="italic">イタリックはイタリックですばい</label>
</fieldset>
<fieldset>
<legend>レベル2見出し</legend>
<label><input type="radio" name="level2" value="normal">普通って言うなぁ</label>
<label><input type="radio" name="level2" value="bold">太く生きる</label>
<label><input type="radio" name="level2" value="italic">イタリックはイタリックですばい</label>
</fieldset>
</p>
<script type="text/javascript">
styleset = {
    'normal': {
        'font-weight' : 'normal',
        'font-style'  : 'normal',
        },
    'bold': {
        'font-weight' : 'bold',
        'font-style'  : 'normal',
        },
    'italic':{
        'font-weight' : 'normal',
        'font-style'  : 'italic',
        },
};
jQuery('input[@type=radio]').click(function(){
    jQuery("li."+ this.name).css(styleset[this.value]);
});
</script>
</body>
</html>