Podmiana css z użyciem js?

Question

Witam Na swoim forum chciałem zrobić przycisk menu (dla mniejszych rozdzielczości) po którego naciśnięciu chowałoby się i pokazywało moje menu. Tak więc stworzyłem sobie przycisk:

<a href="#" class="ui-mobile" onclick="mini_menu()"><i class="fa fa-bars"></i></a>

po którego kliknięciu wywoływana jest funkcja mini_menu.

Jednakże nie wiem jak dodać wartość css dla danej klasy.

document.getElementbyClass("box_menu")

Chciałbym w tym miejscu dodać margin-top: -400px; dla klasy box_menu - dzięki temu menu zostałoby schowane u góry. Po ponownym naciśnięciu przycisk musiałby się zachować inaczej (usunąłby tę wartość) jednak tego też nie potrafię wykonać.

 

Przycisk jest ustawiony na sztywno i widoczny dzięki media queries a strona nie jest responsywna dlatego jest to taki myk.

Answer 1

Zacznijmy od sprawy dostępności: Twój link nie ma jakiegokolwiek tekstu! Przez to nie ma jakiejkolwiek treści, co nie jest zbyt dobre dla wszelkiej maści czytników ekranowych. Proponuję spojrzeć jak robi to np. BS, czyli dodaje dodatkowy element z treścią, który jest następnie ukrywany. Mniej więcej coś takiego: http://jsfiddle.net/Comandeer/a3fgsj06/1/

Druga sprawa dotyczy sposobu, w jaki przypinasz klik - jest to od dawna uważane za złą praktykę: https://pornel.net/onclick
Tego typu rzeczy powinny być przypinane przy pomocy JS

Trzecia sprawa to to, że to nie link, a przycisk, bo chcesz spowodować jakąś akcję na stronie bez przechodzenia pod inny adres.

Co do natomiast operacji na menu: zamiast document.getElementsByClassName (nie ma metody document.getElementByClass!) polecam document.querySelector. Zmianę CSS-a menu możesz spowodować zmieniając odpowiednio klasę tego elementu przy pomocy elem.classList.toggle (lub http://youmightnotneedjquery.com/#toggle_class jeśli potrzebujesz wsparcia dla starszych IE).

Ostatecznie rozwiązanie może wyglądać tak: http://jsfiddle.net/Comandeer/z1p4syLz/1/