`
jayyanzhang2010
  • 浏览: 370945 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

改变字体大小.颜色,背景

 
阅读更多

关键代码:
   $("#formstylecontrols select").change(function(){
        alert($(this).attr("id")+"   "+$(this).val());
                $("p").css($(this).attr("id"),$(this).val()); 
//这里用了一个技巧:把select的ID和要设置的CSS属性值一致 , 就可以一个语句实现三个select的功能
        });

 程序代码
<script type="text/javascript">
$(document).ready(function() {
        $("#formstylecontrols select").change(function(){
        alert($(this).attr("id")+"   "+$(this).val());
                $("p").css($(this).attr("id"),$(this).val());

//这里用了一个技巧:把select的ID和要设置的CSS属性值一致 , 就可以一个语句实现三个select的功能

        });
});

</script>
</head>
<body>
<div id="formstylecontrols">
        <label for="font-size">字体大小</label>
        <select id="font-size">
                <option value="12px">小号</option>
                <option value="14px">较小</option>
                <option value="16px" >中号</option>
                <option value="18px">较大</option>
                <option value="24px">大号</option>
        </select>

        <label for="background">背景颜色</label>
        <select id="background">
                <option value="#F4FBFF">默认</option>
                <option value="#f0f0f0">淡灰</option>
                <option value="#eaeaea">灰色</option>
                <option value="#eefaee">绿色</option>
        <option value="#ffffed">明黄</option>
        </select>

        <label for="color">字体颜色</label>
        <select id="color">
                <option value="#000000">黑色</option>
                <option value="#ff0000">红色</option>
                <option value="#006600">绿色</option>
                <option value="#0000ff">蓝色</option>
        <option value="#660000">棕色</option>
        </select>
        <label>
    <input type="submit" id="style" value="保存设置" />
    </label>
</div>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics