2012-08-30 14 views
16

Piszę skrypt, aby ukryć/pokazać menu, ale mam pewne problemy.Nie można ustawić właściwości 'display' z undefined

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

W komentarzu, co chcę w końcu zrobić, ale nawet jeśli spróbuję z static var, to nie działa. W CSS:

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

staram tak też:

.btn-pageMenu {display:none;} 

Nie więcej sukcesów. Ktoś ma sugestię? Uczę się JS i nie znajduję błędów podczas porównywania z innymi podobnymi skryptami.

Dzięki za pomoc :)

+0

Dlaczego nie można użyć jQuery do ukrycia i pokazać? Ale mimo to upewnij się, że celujesz we właściwy sposób. czy twój element naprawdę ma klasę "btn-pageMenu", czy może jest jakiś identyfikator, którego możesz użyć? –

+1

Ponieważ wolę tworzyć własne skrypty JS niż używać pełnej biblioteki tylko dla niektórych funkcji. I tak na pewno skorzystam z klasy. – TikTaZ

+0

@TikTaZ: FYI 'fieldset.toolsbox ul # btn-pageMenu {display: none;}' w twoim css umożliwiłoby użycie 'getElementById ('btn-pageMenu')' lub 'document.querySelector ('# btn- pageMenu ') ' – KooiInc

Odpowiedz

46

document.getElementsByClassName('btn-pageMenu') dostarcza nodeList. Należy użyć: document.getElementsByClassName('btn-pageMenu')[0].style.display (jeśli jest to pierwszy element z tej listy, którą chcesz zmienić

Jeśli chcesz zmienić style.display dla wszystkich węzłów pętli poprzez liście.

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

aby być kompletna: Jeśli zastosowanie jQuery jest to tak proste, jak:

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

Och, przepraszam za marnowanie twojego czasu, w moim umyśle, kiedy określam unic className, myślałem, że znajdzie go jako ID, zapomnij, że klasa może być mnogie, więc zwraca listę. Dzięki za pomoc :) – TikTaZ

+2

Hi @TikTaz, odpowiadanie na pytania rzadko jest stratą czasu. Myślę, że inni też mogą skorzystać z odpowiedzi. – KooiInc

0

Znalazłem tę odpowiedź w tym miejscu https://plainjs.com/javascript/styles/set-and-get-css-styles-of-elements-53/

W tym dorsza. e dodamy wiele stylów w elemencie:

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>

Powiązane problemy