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。

Answer 1

如果元素没有类，请给它一个。否则，添加一个空格，后跟新的className：

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

Answer 2

使用Element.classList

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

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

Answer 3

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

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

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

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);

Answer 5

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

我不知道......为什么你不想使用jQuery？这使得这类问题变得简单易行。

Answer 6

我使用以下功能使用Just JavaScript

为UiKit齿轮图标设置动画

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

Answer 7

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

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

使用javascript将另一个类添加到div

7 个答案: