Question

我试图找出一种方法来改变我的网站上的用户输入后我的网站上的背景颜色。我不是一个伟大的JavaScript鲨鱼，但我可以使用HTML和CSS。我正在使用getbootstrap.com。

Bootstrap包含表单控件上的错误，警告和成功状态的验证样式。该元素中的任何.control-label，.form-control和.help-block都将接收验证样式。我想使用succes验证样式，无论用户输入什么输入，只要有输入。

我想过使用类似这里的脚本，但我无法弄清楚如何使用bootstrap验证样式：

<script type="text/javascript">
function {
  document.getElementById(elementID).MyFormIdName=MyBootstrapValidationStyleClassName;
}
</script>

Answer 1

如果你想改变课程，你可以做

     document.getElementById('element_id').className='your_class_name';

Answer 2

试试这个

var target = document.getElementById('elementID');
target.className  += "MyBootstrapValidationStyleClassName";

仅供参考：您缺少功能名称。

你正在尝试做什么

<input type="text" id="inp" onblur="fun(this)" />

CSS：

.success {
    background: green;
}
.error {
    background: red;
}

JS：

function fun(inp) {
    var target = document.getElementById(inp.id);
    target.className = inp.value;
}

JSFiddle

Answer 3

如果要删除所有应用的类并仅应用您的类，请使用以下

<script type="text/javascript">
    (function() {
         document.getElementById("elementID").className="MyBootstrapValidationStyleClassName";
    })();
</script>

如果您不想删除已经应用的类并再应用一个类，那么

<script type="text/javascript">
    (function() {
         document.getElementById("elementID").className+="MyBootstrapValidationStyleClassName";
         //Or
         //$("#elementID").addClass("MyBootstrapValidationStyleClassName");
    })();
</script>

输入时Javascript背景颜色发生变化

3 个答案: