将另一个类添加到一个 div 中。

Question

我有一个函数，它检查表单提交的年龄，然后根据他们的年龄在一个 div 中返回新内容。现在我只是使用 getElementById 来替换 HTML 内容。但是如果我也能给一个 div 添加类，那对我来说会更好。例如：

if (under certain age) {
    document.getElementById('hello').innerHTML = "<p>Good Bye</p>"; 
    createCookie('age','not13',0)
    return false;
} else {
    document.getElementById('hello').innerHTML = "<p>Hello</p>";  
    return true;
}

我想做的是将所有内容放在一个 div 中，如果返回 false，则该 div 消失并替换为其他内容。我可以得到一些使用纯 JavaScript 实现这个功能的好方法吗？我不想在这个特定的函数中使用 jQuery。

- Zac

Answer 1

如果元素没有class属性，则给它添加一个。否则，在原有类名后加一个空格，然后再加上新的className:

  var el = document.getElementById('hello');
  if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
  }

- karim79

---

太棒了，谢谢！您能否解释一下这部分的含义：“someClass' : 'someClass”？为什么要这样定义两次...第一部分是做什么用的？ - Zac

@zac - 这是条件运算符。如果 el.className 评估为 true，则会分配第一个值（问号后面），如果为 false，则会分配第二个值。这是 if..else 的快捷方式。在这里查看：http://www.w3schools.com/JS/js_comparisons.asp - karim79

那个 condition ? 'if true' : 'if false'; 注释被称为三元操作符。它适用于多个真/假树，尽管在第一个之后可能会变得混乱。 console.log(shift[i].status != 'active' ? shift[i].id : shift[i].hbn + shift[i].type == 'product' ? '-' + shift[i].id : '' 无论您的第二个条件是在true块还是false块中，都没有关系。如果它在false块中更容易阅读。如果两边都有其他条件，则最好使用多个if-else-if块。 - CSS

这里使用+=正确吗？这将会把旧类名追加到新类名中，导致内容重复。难道你不想在这里进行普通的赋值操作吗？ - David Given

@DavidGiven 由于这是一个三元运算符，他实际上并没有输出 el.className，而是使用三元运算符检查其是否存在。条件语句不会被输出，但根据 className 的存在与否，会输出真/假的结果。 - Taylor Daughtry

自此答案发布已经过去了七年，尽管当时这是最好的方法，但现在@Rich的答案是处理CSS类名更简洁、更新的方法。 - asiop

Answer 2

使用 Element.classList

document.getElementById('hello').classList.add('someClass');

.add 方法只会在元素上不存在指定类名时才添加该类名。因此，不必担心重复的类名。

- Rich McCluskey

---

这绝对是更好的方式。如果该类已经存在，只需添加/删除（add/remove），而不是可能多次添加相同的类。 - Tony Basallo

Answer 3

你可以在 className 成员变量前加上一个空格，以添加一个类。

document.getElementById('hello').className += ' new-class';

参见https://developer.mozilla.org/En/DOM/Element.className

- user229044

Answer 4

你只需要使用document.getElementById('hello').setAttribute('class', 'someclass');。

同时，innerHTML可能会导致意外的结果！请考虑以下内容；

var myParag = document.createElement('p');

if(under certain age)
{
    myParag.text="Good Bye";
    createCookie('age', 'not13', 0);
    return false;
{
else
{
    myParag.text="Hello";
    return true;
}

document.getElementById('hello').appendChild(myParag);

- Jonathan Czitkovics

---

document.getElementById('hello').setAttribute('class', 'someclass') 也可以这样做... - Gervase

Answer 5

在DOM中，元素的类只是由空格分隔的每个类。您只需要实现解析逻辑以根据需要插入/删除类即可。

不过我想...为什么不使用jQuery呢？它可以轻松地解决这种问题。

- Tejs

Answer 6

我使用以下函数来使用纯JavaScript动画UiKit齿轮图标：

document.getElementById("spin_it").onmouseover=function(e){
var el = document.getElementById("spin_it");
var Classes = el.className;
var NewClass = Classes+" uk-icon-spin";
el.className = NewClass;
console.log(e);
}

<span class="uk-icon uk-icon-small uk-icon-gear" id="spin_it"></span>

这段代码在这里不起作用...你必须添加UIKit样式

- Mostafa

Answer 7

我遇到了同样的问题。如果父元素被隐藏，那么在显示所选下拉菜单后，它们将不会显示。 这不是一个完美的解决方案，但它解决了我的问题。在显示元素后，您可以使用以下代码。

function onshowelement() { $('.chosen').chosen('destroy'); $(".chosen").chosen({ width: '100%' }); }

- purab