Dodawanie klasy do body tag: testowanie istniejącego rozwiązania JavaScript bez wyników

Znalazłem świetny kawałek kodu JavaScript (łącze StackOverflow: How to add a class to body tag?). Mam jednak problem z jego implementacją.Dodawanie klasy do body tag: testowanie istniejącego rozwiązania JavaScript bez wyników

Poniżej znajduje się kod używam na stronie testowej:

<!doctype html> 
<html> 
<head> 
<title>Javascript Test</title> 
<meta charset="utf-8" /> 

<script type="text/javascript"> 
var newClass = window.location.href; 
newClass = newClass.match(/\/[^\/]+(_|\.)[^\/]+$/); 
$(document.body).addClass(newClass); 
</script> 

</head> 
<body> 
</body> 
</html>

jednak nie widzę żadnej klasy dodane do znacznika body w wyniku. (Wyświetlanie źródła w Safari, Chrome) Przetestowałem zi bez jQuery.

Czy widzisz, co jest nie tak z kodem?

Pracuję z serwerem Behance ProSite. Mogę tworzyć wiele galerii, ale każda z nich będzie miała to samo tło, ponieważ używa tego samego szablonu. Potrzebuję dodać unikalną klasę do znacznika body, aby móc kierować reklamy na każdą z inną właściwością tła CSS.

Źródło

2013-05-03 user2347736

Upewnij się, że jQuery jest dołączony do twojej strony. – dinjas

Dzięki za szybką odpowiedź. Dodałem '' i zastąpiłem ostatnią linię JavaScript '$ ('body'). AddClass (newClass); 'i nadal brak wyników. – user2347736

Powinieneś odwołać się do jquery * przed * twoim scenariuszem – enb081

Jest kilka drobnych problemów z tym kodem:

Upewnij regex w match rzeczywiście pasuje do wzorców adresów URL. Myślę, że Behance Prosites używają wzorca adresu URL, takiego jak /1234/section i /1234/5678/section/item.
Funkcja match zwraca tablicę, więc nie można przejść bezpośrednio pod newClass do addClass. Musisz przekazać jeden z elementów tablicy, np. newClass[0].
Ponieważ skrypt znajduje się w <head>, nie można zmodyfikować <body>, ponieważ nie istnieje w czasie wykonywania. Musisz albo przenieść skrypt na dół strony, albo odroczyć wykonanie do czasu załadowania DOM.

Ten fragment powinien działać w szczególności w przypadku Behance Prosites. Wyrażenie regularne dopasowuje segmenty ścieżki URL z co najmniej jednym nieliczbowym znacznikiem, aby odfiltrować /1234/5678/ z adresu URL, dzięki czemu newClass[0] będzie mieć postać section w powyższych przykładowych adresach URL.

$(document).ready(function() { 
    var path = window.location.pathname; 
    var newClass = path.match(/[^\/]*[^\d\/][^\/]*/); 
    $('body').addClass(newClass[0]); 
});

Powodzenia!

Źródło

2013-05-04 18:49:00

Ten działał dla mnie! Dzięki Matt! – user2347736

Aby dodać klasę do znacznika body, można wykonać następujące czynności w waniliowym JavaScript bez konieczności zawierać trochę tłuszczu 3rd biblioteki strona

Jeśli klasa już istnieje na ciele następnie

document.body.className += " something";

przeciwnym razie

document.body.className = "something";

przykład na jsfiddle

Aby mieć klasę dodaje się po zakończeniu ładowania strony następnie użyj addEventListener i utworzyć uchwyt do Zdarzenie window.onload event

obciążenia na końcu procesu ładowania dokumentu. W tym punkcie wszystkie obiekty w dokumencie znajdują się w DOM, a wszystkie obrazy i podramki zakończyły się ładowaniem.

window.addEventListener("load", function() { 
    document.body.className = "something"; 
}, false);

Źródło

2013-05-03 20:43:40 Xotic750

To ma sens, ale wciąż nie działa dla mnie (Chrome i Safari), to jest kod, w którym używam linii dla linii na wypadek, gdy czegoś brakuje: ' JavaScript test ' – user2347736

Wdrożenie słuchacza onload jakbym wykazać w moim przykładzie. – Xotic750

Aby usunąć nazwę klasy w nowoczesnych przeglądarkach, można użyć document.querySelector ("body"). ClassList.remove ("coś"); W nazwie klasy jest rozróżniana wielkość liter – phil

Dodawanie klasy do body tag: testowanie istniejącego rozwiązania JavaScript bez wyników

Odpowiedz

Powiązane problemy