Добавление тега к телу тела: тестирование существующего решения Javascript без результатов

Я нашел отличный кусок кода Javascript (ссылка StackOverflow: Как добавить класс в тег тела?). Однако у меня возникают проблемы с его реализацией.

Ниже приведен код, который я использую на тестовой странице:

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

Однако я не вижу в результате добавления класса в тег body. (Просмотр источника в Safari, Chrome) Я тестировал с jQuery и без него.

Вы видите, что не так с кодом?

Я работаю с Behance ProSite. Я могу создать несколько галерей, но каждый из них будет иметь тот же фон, потому что они используют один и тот же шаблон. Мне нужно добавить уникальный класс в тег body, чтобы я мог настроить каждый элемент с другим свойством фона фона.

Ответы

Ответ 1

Есть пара незначительных проблем с этим кодом:

  • Убедитесь, что регулярное выражение в match действительно соответствует вашим шаблонам URL. Я думаю, что Behance Prosites использует шаблон URL, например /1234/section и /1234/5678/section/item.
  • Функция match возвращает массив, поэтому вы не можете передать newClass непосредственно в addClass. Вам нужно передать один из элементов массива, например newClass[0].
  • Поскольку ваш script находится в <head>, он не может изменить <body>, потому что он не существует во время выполнения. Вам нужно либо переместить script в нижнюю часть страницы, либо выполнить отсрочку до тех пор, пока не загрузится DOM.

Этот фрагмент должен работать специально для Behance Prosites. Регулярное выражение соответствует сегментам URL-адреса с хотя бы одним нечисловым символом, чтобы отфильтровать /1234/5678/ из URL-адреса, поэтому newClass[0] будет section в приведенных выше URL-адресах.

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

Удачи!

Ответ 2

Чтобы добавить класс в тег body, вы можете сделать следующее в ванильном Javascript без необходимости включать какую-то толстую стороннюю библиотеку

Если класс уже существует в теле, то

document.body.className += " something";

В противном случае

document.body.className = "something";

Пример jsfiddle

Чтобы добавить класс после завершения загрузки страницы, используйте addEventListener и создайте обработчик для окна .onload событие

Событие загрузки запускается в конце процесса загрузки документа. В этот пункт, все объекты в документе находятся в DOM, и все изображения и подкадры закончили загрузку.

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