JavaScript将一个HTML类添加到div。如果声明。引导

Question

您可能已经看到输入框带有成功刻度glythicon。

我正在尝试创建一个输入框正常（不是绿色且没有勾选显示）的表单，并且在JavaScript中成功验证后，我希望它更改为绿色边框并显示glythicon tick。我认为添加类是实现它的方法，我不能让它工作。

我尝试使用以下内容添加类：

null

但我无法弄清楚正确的语法来使这段代码工作。

document.getElementById('id').className.add('addditional classes');

HTML代码

function validateName() {
     var name = document.getElementById("first_name").value;

     if(name.match(/^[A-Za-z]*\s{0}$/)){
            document.getElementById('firstcheck').classform-group, has-feedback.add(' has-success'); 
            document.getElementById('firstcheck2').classglythicon, glythicon-ok.add(' form-control-feedback');
     }

任何帮助将不胜感激!!!

Answer 1

尝试以这种方式添加课程：

//first get the element
var elem = document.getElementById("id");
//append new classes to your existing class
elem.className = elem.className + " additional classes";

//apply the same login in your remaining code
if(name.match(/^[A-Za-z]*\s{0}$/)){
        elem  = document.getElementById('firstcheck');
        elem.className = elem.className + " has-success";

        elem = document.getElementById('firstcheck2');
        elem.className = elem.className + " form-control-feedback"; 
 }

或

您可以使用jquery轻松实现此目的：

$('id').addClass('additional-classes');

Answer 2

复制+粘贴后请务必仔细检查您的代码。

引号的位置很重要，点的放置也很重要

这是jquery代码：

$('id').addClass('addditional classes');

请改为尝试：

function validateName() {
 var name = document.getElementById("first_name").value;

 if(name.match(/^[A-Za-z]*\s{0}$/)){
        document.getElementById('firstcheck').className += 'form-group has-feedback has-success'; 
        document.getElementById('firstcheck2').className += 'glythicon glythicon-ok form-control-feedback';
 }

同样不包括在类名字符串

中

Answer 3

由于Bootstrap的JS需要jQuery，你可以让你的生活更加轻松。我创建了一个小例子https://jsfiddle.net/eg8dsgh2/。只需使用jQuery的addClass()

希望有所帮助

Answer 4

document.getElementById('firstcheck').classform-group, has-feedback.add(' has-success');

这是发明的吗？你在哪里看到这样的东西' 要添加类，请使用className。

 document.querySelector('#firstcheck').className += " has-success";