Javascript 将另一个类添加到 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2739667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add another class to a div
提问by Zac
I have a function that checks the age of a form submission and then returns new content in a div depending on their age. Right now I am just using getElementById to replace the HTML content. BUt I think would work better for me if I could also add a class to a div as well. So for example I have.
我有一个函数可以检查表单提交的年龄，然后根据他们的年龄在 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;
}
What I would like to do is have everything in a div and if return false then that div disappears and is replaced with other content. Can I get any ideas on a good way to achieve this with pure JavaScript. I don't want to use jQuery for this particular function.
我想做的是将所有内容都放在 div 中，如果返回 false，则该 div 消失并被其他内容替换。我能否获得有关使用纯 JavaScript 实现此目标的好方法的任何想法。我不想将 jQuery 用于此特定功能。
回答by karim79
If the element has no class, give it one. Otherwise, append a space followed by the new className:
如果元素没有类，给它一个。否则，在新的 className 后面附加一个空格：
var el = document.getElementById('hello');
if(el) {
el.className += el.className ? ' someClass' : 'someClass';
}
回答by Rich McCluskey
document.getElementById('hello').classList.add('someClass');
The .addmethod will only add the class if it doesn't already exist on the element. So no need to worry about duplicate class names.
.add如果元素上尚不存在该类，则该方法只会添加该类。所以无需担心重复的类名。
回答by meagar
You can append a class to the classNamemember, with a leading space.
您可以将类附加到className成员，并带有前导空格。
document.getElementById('hello').className += ' new-class';
回答by Jonathan Czitkovics
Well you just need to use document.getElementById('hello').setAttribute('class', 'someclass');.
那么你只需要使用document.getElementById('hello').setAttribute('class', 'someclass');.
Also innerHTMLcan lead to unexpected results! Consider the following;
也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);
回答by Mostafa
I use below function to animate UiKit gear icon using Just JavaScript
我使用以下函数使用 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);
}<span class="uk-icon uk-icon-small uk-icon-gear" id="spin_it"></span>This code not work here...you must add UIKitStyle to it
这段代码在这里不起作用……你必须向它添加UIKit样式
回答by Tejs
In the DOM, the class of an element is just each class separated by a space. You would just need to implement the parsing logic to insert / remove the classes as necesary.
在 DOM 中，元素的类就是用空格分隔的每个类。您只需要实现解析逻辑即可根据需要插入/删除类。
I wonder though... why wouldn't you want to use jQuery? It makes this kind of problem trivially easy.
我想知道……你为什么不想使用 jQuery？它使这类问题变得轻而易举。
回答by purab
I am facing the same issue. If parent element is hidden then after showing the element chosen drop down are not showing. This is not a perfect solution but it solved my issue. After showing the element you can use following code.
我面临同样的问题。如果父元素被隐藏，则在显示所选元素后，下拉列表不会显示。这不是一个完美的解决方案，但它解决了我的问题。显示元素后，您可以使用以下代码。
function onshowelement() { $('.chosen').chosen('destroy'); $(".chosen").chosen({ width: '100%' }); }
