2016-06-13 8 views
1

Ich verberge regelmäßig Knoten durch JavaScript, aber jetzt muss ich diejenigen von einer bestimmten Klasse inline-block (nicht block) bei der Anzeige festlegen. Allerdings habe ich ein Problem mit Sortierung der inline-block Klasse und den Rest haben, ist die class null in diesem Zusammenhang:Wie überprüft man, ob ein Knoten eine bestimmte Klasse in Dojo hat?

show: function (div) { 
    if (typeof div === 'object' && typeof div.style === 'object') { 
     if (div.class == "inline-block-class") //this doesn't work 
     { 
      div.style.display = "inline-block"; 
     } else { 
      div.style.display = "block"; 
     } 
    } 
} 

Die div s von data-dojo-attach-point verwiesen wird - ich mit so etwas wie this.someAttachPoint vollständig funktionieren kann, aber wenn ich wickle es in eine andere Variable (wie div in meiner Funktion), ich bekomme nur die CSS-Selektoren des Knotens - es ist ein Objekt, aber ich kann seine Eigenschaften nicht in FireBug erhalten.

Ich kann dies umgehen, indem Sie einen anderen Parameter hinzufügen, ein Flag mir zu sagen, dass dieser Knoten inline-block sein sollte, aber es ist schmutzig und eine weitere Gelegenheit für Fehler, so würde ich es vorziehen, die block/inline-block Unterscheidung innerhalb der Funktion zu tun.

Antwort

3

Verwenden Sie die dojo/dom-class und dojo/dom-style Module die Klasse auf einem DOM-Knoten zu prüfen und den Stil ändern.

show: function (div) { 
if (typeof div === 'object' && typeof div.style === 'object') { 
    if (domClass.contains(div, "inline-block-class")) 
    { 
     domStyle.set(div, 'display', 'inline-block'); 
    } else { 
     domStyle.set(div, 'display', 'block'); 
    } 
} 
} 

bessere Lösung dieses Problems ist die div.style.display mit der CSS und Javascript nicht zu kontrollieren. Ändern Sie einfach die Klassen in Javascript und lassen Sie CSS das Styling übernehmen.

+0

Über den letzten Satz, ich Funktion ausblenden (div) Einstellung Anzeige auf keine ist komplementär zu diesem, so scheint rein CSS-Ansatz in meinem Fall nicht anwendbar; divs verbergen, ohne display zu setzen: nichts ist etwas, was ich nicht kann, und es ist mir egal, ob die Erneuerung des richtigen Display-Stils ziemlich einfach ist. –

+1

Definieren Sie für jeden Status eine Klasse. So wie 'unsichtbar' für' display: none', 'inline-block-class' für' display: inline-block' und 'block-class' für' display: block'. Und jetzt, manipuliere einfach die Klassen in Javascript, das CSS wird automatisch geändert. – Himanshu

+1

Der Ansatz von Ihrem Kommentar macht Sinn - definieren Sie einfach versteckte Klasse mit Display none! Wichtig und fügen Sie es hinzu und entfernen Sie es, wie ich den Knoten ausblenden und anzeigen. –

2

Sie können Element.classList Eigenschaft des DOM-Elements div verwenden, es eine Methode contains exposed.

Prüft, ob der angegebene Klassenwert im Klassenattribut des Elements existiert.

if (div.classList.contains("inline-block-class")) 
{ 
    div.style.display = "inline-block"; 
} else { 
    div.style.display = "block"; 
} 
Verwandte Themen