将另一个类添加到 div答案

【问题标题】：Add another class to a div将另一个类添加到 div
【发布时间】：2010-04-29 18:09:04
【问题描述】：

我有一个函数可以检查表单提交的年龄，然后根据他们的年龄在 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。

【问题讨论】：

标签： javascript

【解决方案1】：

如果元素没有类，就给它一个。否则，在新的类名后面附加一个空格：

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

【讨论】：

太棒了，谢谢！你能解释一下这部分..' someClass' : 'someClass' 为什么它被定义了两次......第一部分是做什么的？
@zac - 这是条件运算符。如果el.className 评估为真，则分配第一个值（在问号之后），如果为假，则分配第二个值。这是一个 if..else 快捷方式。看这里：w3schools.com/JS/js_comparisons.asp
那个condition ? 'if true' : 'if false'; 注解叫做三元运算。它适用于多个真/假树，尽管它们可能会在前两个之外变得混乱。 console.log(shift[i].status != 'active' ? shift[i].id : shift[i].hbn + shift[i].type == 'product' ? '-' + shift[i].id : '' 你的第二个条件是在真块还是假块都没有关系。如果它是错误的，它会更容易阅读。如果两边都有附加条件，最好使用多个 if-else-if 块。
@DavidGiven 因为这是一个三元运算符，他实际上并没有输出el.className，而是使用三元运算符检查它的存在。条件不输出，但真假结果是，取决于className的存在。
自发布此答案以来已经过去了七年，而当时这是最好的方法，@Rich 答案是当今处理 CSS 类名称的一种更新且更简洁的方法.

【解决方案2】：

使用Element.classList

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

.add 方法只会添加该元素上尚不存在的类。所以不用担心类名重复。

【讨论】：

这是迄今为止更好的方法。如果该类已经存在，则它只是添加/删除（添加/删除）而不是可能多次添加同一个类。

【解决方案3】：

您可以将类附加到className 成员，并带有前导空格。

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

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

【讨论】：

【解决方案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);

【讨论】：

document.getElementById('hello').setAttribute('class', 'someclass') 也可以...

【解决方案5】：

在 DOM 中，一个元素的类只是每个类之间用空格隔开。您只需要实现解析逻辑以根据需要插入/删除类。

我想知道...为什么您不想使用 jQuery？它使这类问题变得非常简单。

【讨论】：

【解决方案6】：

我使用下面的函数来使用 Just 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);
}

&lt;span class="uk-icon uk-icon-small uk-icon-gear" id="spin_it"&gt;&lt;/span&gt;

此代码在这里不起作用...您必须为其添加 UIKit 样式

【讨论】：

【解决方案7】：

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

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

【讨论】：