Dodaj kolejną klasę do div


Mam funkcję, która sprawdza wiek przesłania formularza, a następnie zwraca nową zawartość do elementu div na podstawie ich wieku. W tej chwili używam getElementById do zamiany zawartości HTML. BUt myślę, że byłoby lepiej dla mnie, gdybym mógł dodać także klasę do div. Na przykład mam.
if (under certain age) {
document.getElementById('hello').innerHTML = "Good Bye";
createCookie('age','not13',0)
return false;
} else {
document.getElementById('hello').innerHTML = "Hello";
return true;
}

Chciałbym mieć wszystko w elemencie div i jeśli zwróci wartość false, to div zniknie i zostanie zastąpiony inną zawartością. Czy mogę znaleźć jakieś pomysły, jak to osiągnąć za pomocą czystego JavaScript. Nie chcę używać jQuery do tej konkretnej funkcji.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jeśli element nie ma klasy, nadaj mu jedną. W przeciwnym razie dodaj spację, a po niej New className:
var el = document.getElementById('hello');
if(el) {
el.className += el.className ? ' someClass' : 'someClass';
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Stosowanie

Element.classList
https://developer.mozilla.org/ ... sList
document.getElementById('hello').classList.add('someClass');

Metoda
.add
doda klasę tylko wtedy, gdy jeszcze nie istnieje w elemencie. Nie ma więc potrzeby martwić się o zduplikowane nazwy klas.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz dodać klasę do elementu członkowskiego
className
ze spacją wiodącą.
document.getElementById('hello').className += ' new-class';

Widzieć

https://developer.mozilla.org/ ... sName
https://developer.mozilla.org/ ... sName
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Cóż, wystarczy użyć
document.getElementById ('hello'). SetAttribute ('class', 'someclass');
.
Ponadto
innerHTML
może prowadzić do nieoczekiwanych wyników! Rozważ następujące;
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);
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

W DOM klasa elementu to po prostu każda klasa oddzielona spacją. Będziesz musiał tylko zaimplementować logikę analizowania, aby wstawić/usunąć klasy zgodnie z potrzebami.
Chociaż zastanawiam się ... dlaczego nie używasz jQuery? To sprawia, że ​​tego rodzaju problem jest banalnie łatwy.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Używam poniższej funkcji do animowania ikony koła zębatego UiKit przy użyciu wyłącznie JavaScript
<div class="snippet-code">
<div class="snippet" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
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);
}

<pre class="snippet-code-html lang-html prettyprint-override">
<span class="uk-icon uk-icon-small uk-icon-gear" id="spin_it"></span>

Ten kod nie działa tutaj ... należy dodać do

mu
http://getuikit.com/
Styl UIKit
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Mam ten sam problem. Jeśli element nadrzędny jest ukryty, to po wyświetleniu wybranego elementu lista rozwijana nie jest wyświetlana.
To nie jest idealne rozwiązanie, ale rozwiązało mój problem. Po pokazaniu przedmiotu możesz użyć poniższego kodu.
function onshowelement() { $('.chosen').chosen('destroy'); $(".chosen").chosen({ width: '100%' }); }

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się