2012-08-30 7 views
16

Ich schreibe Skript, um Menü zu verstecken/zu zeigen, aber ich bekomme einige Schwierigkeiten.Kann Eigenschaft 'Anzeige' von undefined nicht setzen

function displayMenu() { 
//var classMenu = event.target.className; 
//classMenu += 'Menu'; 
    //document.getElementsByClassName(classMenu).style.display = 'block'; 
document.getElementsByClassName('btn-pageMenu').style.display = 'block'; 
    } 

In Kommentar, was ich schließlich tun will, aber selbst wenn ich mit statischen var versuchen, es funktioniert nicht. Im CSS:

fieldset.toolsbox ul.btn-pageMenu {display:none;} 

Ich versuche auch so:

.btn-pageMenu {display:none;} 

nicht mehr Erfolg. Hat jemand einen Vorschlag? Ich lerne JS und finde keine Fehler, wenn ich mit anderen ähnlichen Skripten vergleiche.

Vielen Dank für Ihre Hilfe :)

+0

Warum Sie verstecken verwenden jQuery nicht und zeigen? Aber stellen Sie sicher, dass Sie es richtig ausgerichtet haben. Hat Ihr Element wirklich die Klasse "btn-pageMenu" oder gibt es vielleicht eine ID, die Sie verwenden könnten? –

+1

Da ich lieber mein eigenes JS-Skript als eine vollständige Bibliothek nur für einige Funktionen verwenden. Und ja, ich bin sicher, die Klasse zu benutzen. – TikTaZ

+0

@TikTaZ: FYI 'fieldset.toolsbox ul # btn-pageMenu {display: none;}' in Ihrem CSS würde die Verwendung von 'getElementById ('btn-pageMenu')' oder 'document.querySelector ('# btn- pageMenu ') ' – KooiInc

Antwort

46

document.getElementsByClassName('btn-pageMenu') eine nodeList liefert. Sie sollten verwenden: document.getElementsByClassName('btn-pageMenu')[0].style.display (wenn es das erste Element aus dieser Liste ist die Sie ändern möchten

Wenn Sie style.display für alle Knoten Schleife durch die Liste ändern.

var elems = document.getElementsByClassName('btn-pageMenu'); 
for (var i=0;i<elems.length;i+=1){ 
    elems[i].style.display = 'block'; 
} 

vollständig zu sein: Wenn Sie Verwendung jquery es ist so einfach wie:

​$('.btn-pageMenu').css('display'​​​​​​​​​​​​​​​​​​​​​​​​​​​,'block');​​​​​​ 
+0

Oh sorry, um Ihre Zeit zu verschwenden, in meinen Gedanken, wie ich eine unic className ich denke, es wird als ID finden, vergessen, dass Klasse kann multiple sein, so dass es eine Liste zurückgeben. Danke für die Hilfe :) – TikTaZ

+2

Hi @TikTaz, eine Frage zu beantworten ist selten eine Zeitverschwendung. Ich denke, andere Menschen können auch von Antworten profitieren. – KooiInc

0

ich diese Antwort in der https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/ Website gefunden haben

in diesem cod. e wir mehrere Stile in einem Element hinzufügen:

let 
 
    element = document.querySelector('span') 
 
    , cssStyle = (el, styles) => { 
 
     for (var property in styles) { 
 
      el.style[property] = styles[property]; 
 
     } 
 
    } 
 
; 
 

 
cssStyle(element, { background:'tomato', color: 'white', padding: '0.5rem 1rem'});
span{ 
 
font-family: sans-serif; 
 
color: #323232; 
 
background: #fff; 
 
}
<span> 
 
lorem ipsum 
 
</span>

Verwandte Themen