Ajouter une balise Class to Body: tester la solution Javascript existante sans résultat

J'ai trouvé un grand morceau de code Javascript (StackOverflow lien: Comment ajouter une classe à la balise body?). Cependant, j'ai du mal à la mettre en œuvre.

Ci-dessous le code que j'utilise sur une page de test:

<!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>

Cependant je ne vois pas la classe ajouté à la balise body. (Source de lecture dans Safari, Chrome) j'ai testé avec et sans jQuery.

Voyez-vous quel est le problème avec le code?

Je travaille avec un Behance ProSite. Je peux créer plusieurs galeries, mais chacun aura le même arrière-plan, car ils utilisent le même modèle. J'ai besoin d'ajouter une classe unique à la balise body, donc je peux cibler chaque avec une autre feuille de style CSS background de la propriété.

source d'informationauteur user2347736

  1. 6

    Il y a quelques problèmes mineurs avec ce code:

    1. Assurez-vous que la regex dans match correspond en fait à votre URL de motifs. Je pense que Behance Prosites utiliser un modèle d'URL comme /1234/section et /1234/5678/section/item.
    2. La match fonction renvoie un tableau, de sorte que vous ne pouvez pas passer newClass directement dans addClass. Vous avez besoin de passer l'un des éléments de tableau, comme newClass[0].
    3. Depuis votre script est dans le <head> il ne peut pas modifier <body> car il n'existe pas au moment de l'exécution. Vous avez besoin soit de déplacer le script en bas de la page ou de différer l'exécution jusqu'à ce que après le DOM est chargé.

    Cet extrait de code devrait fonctionner spécifiquement pour Behance Prosites. L'expression régulière correspond à l'URL de segments de tracé avec au moins un caractère non numérique, afin de filtrer le /1234/5678/ à partir de l'URL, donc newClass[0] sera section dans l'exemple ci-dessus Url.

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

    Bonne chance!

  2. 20

    Pour ajouter une classe à la balise body, vous pouvez effectuer les opérations suivantes en Javascript natif sans avoir besoin d'inclure un peu de graisse, 3ème partie de la bibliothèque de

    Si une classe existe déjà sur le corps, puis

    document.body.className += " something";

    Sinon

    document.body.className = "something";

    Exemple sur jsfiddle

    À la classe ajoutées après que la page a fini de se charger, puis utilisez la méthode addEventListener et de créer un gestionnaire pour l' de la fenêtre.événement onload

    La charge de l'événement se déclenche à la fin du document du processus de chargement. Au
    ce point, tous les objets dans le document sont, dans les DOM, et tous les
    les images et les sous-images ont fini de charger.

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