Javascript 通过form-live预览编辑CSS

如何添加编辑背景色（通过输入）和边框权重（通过输入）的选项。请看我的剧本

我不是JS方面的专家，请给JSFIDLE举个例子

$（'.divSpecific input'）。单击（函数（）{
如果（$（this.attr（“alt”）=“1”）
$（'div.signUp'）.css（“背景”、“红色”）
.css（“颜色”、“黑色”）；
else if（$（this.attr（“alt”）=“2”）
$（'div.signUp'）.css（“背景”、“黄色”）
.css（“颜色”、“黑色”）；
其他的
$（'div.signUp'）.css（“背景”、“青色”）
.css（“颜色”、“白色”）；
});
div.divSpecific{
高度：20px；
}
.注册{
边框：实心1px；
高度：20px；
宽度：100px；
文本对齐：居中；
}

第一步-选择按钮
设计-第1版
设计-第2版
设计-第3版


或手动更改背景、文本和边框（十六进制格式）
背景色
文本颜色
边框颜色


并更改边界权重
边框权重（默认为1像素）



注册
从外观上看，与其单击，不如尝试更改事件？
创建一个函数，该函数将处理CSS样式的应用，然后向无线电输入添加一些数据属性，并使用它们设置文本区域中的默认值


$（'[type=“radio”]'）。单击（函数（）{
$（“#边框颜色”）.val（$（this.attr（“数据边框颜色”）），
$（“#边框宽度”）.val（$（this.attr（“数据边框宽度”）），
$（“#bg_color”）.val（$（this.attr（“数据bg color”）），
$（“#文本颜色”）.val（$（this.attr（“数据颜色”）），
applyStyles（）；
})
$（'[type=“submit”]'）。单击（函数（）{
applyStyles（）；
})
函数applyStyles（）{
$（'div.signUp'）.css({
borderColor:$（“#border_color”）.val（），
边框宽度：$（“#边框宽度”）.val（），
背景颜色：$（“#bg_color”）.val（），
颜色：$（“#文本_颜色”）.val（），
})
}
div.divSpecific{
高度：20px；
}
.注册{
边框：实心1px；
高度：20px；
宽度：100px；
文本对齐：居中；
}

第一步-选择按钮
设计-第1版
设计-第2版
设计-第3版

或手动更改背景、文本和边框（十六进制格式）
背景色
文本颜色
边框颜色

并更改边界权重
边界重量（除雾1像素）



注册
一个选项是为每个为您调用函数的按钮添加onClick选项：

<input type="text" id="backgroundInput"><button onClick="updateBackground()">Confirm</button>

function updateBackground() {
    $('div.signUp').css('background-color', $('#backgroundInput');
}

确认
函数updateBackground（）{
$（'div.signUp'）.css（'background-color'，$（'#backgroundInput'）；
}

只需冲洗并重复其他三个输入

另一个选项是，您可以为每个按钮提供一个ID，并通过为每个按钮添加一个.click（function（）…）处理程序来执行与单选按钮类似的操作。
我无法使用“post”方法发送此数据。问题：按确认按钮发送表单，而自动完成的数据不会发送：（您可以作为一个新问题提问吗？不要忘记在新问题中包含
标记以及任何其他相关详细信息。例如：您用来接收它的服务器端代码。