CSS样式设置与保存-优快云博客

本文链接：https://blog.youkuaiyun.com/ooxxooxx123/article/details/84242076

本文介绍了一种通过JavaScript实现的CSS样式设置与保存方法，利用HTML的select元素和JavaScript的改变事件来动态调整页面样式，并在用户点击保存按钮时将当前选择的样式应用到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码：
   $("#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>

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