如何将输入css重置为Bootstrap 3.2中的默认值

Question

我使用以下代码将bootstrap 3.2中特定输入元素的默认边框css更改为绿色：

$('#' + fieldID).css({
    'border-color': '#00b300', 
    'border-width': '1px', 
    'box-shadow': 'none', 
    'outline': 'none', 
    '-webkit-box-shadow': 'none'
});

其中fieldID是输入字段的名称

现在，在特定情况下，我想将此字段重置为默认行为/样式。

我设法通过使用以下内容使其看起来像一个默认的字段：

$('#' + fieldID).css({
    'border-color': '#9ecaed', 
    'border-width': '1px', 
    'box-shadow': '0 0 10px #9ecaed',  
    '-webkit-box-shadow': '0 0 10px #9ecaed',
    'outline': 'none'
});

然而，这并不能恢复默认行为，其中默认字段具有灰色边框，而聚焦的字段具有蓝色（如下所示）

如果有办法恢复正常行为，请指导我，我甚至尝试在jQuery中克隆元素，但是复制样式并因此徒劳无功。

感谢您阅读本文

Answer 1

我们可以这样做

<style>
    .myClass {
            border-color:#9ecaed;
            border-width: 1px;
            box-shadow: 0 0 10px #9ecaed;
            -webkit-box-shadow: 0 0 10px #9ecaed;
            outline:none;
     }

</style>

jquery是。如果你添加这样的类

$('#'+fieldID).addClass("myClass");

重置您要删除课程

$('#'+fieldID).removeClass("myClass");

Answer 2

不要通过jQuery设置样式。创建新的CSS类，例如default-input，在jQuery中，您将执行此操作以设置默认值：

$('#'+fieldID).addClass('default-input');

并重置为bootstrap-default：

$('#'+fieldID).removeClass('default-input');