Смена фавикона по событию

@Mailo · Регистрация: 18.02.2010

Студворк — интернет-сервис помощи студентам

Возможно ли как то обратиться к фавикону по событию и сменить его, например по наличию класса:

JavaScript
1
2
3
4
5
6
if ($(".wrapper").hasClass(".light")) {
  <link rel="shortcut icon" href="favicon.svg" type="image/svg">
},
else if ($(".wrapper").hasClass(".dark")) {
  <link rel="shortcut icon" href="favicon_dark.svg" type="image/svg">
}

@voraa · 30.10.2024, 12:48

JavaScript
1
$("#favicon").href = "favicon.svg"

Ох уж этот jquery. Это же не ванила.
$("#favicon") - это не элемент DOM. Это объект jq. У него нет свойства href.

C jq надо

JavaScript
1
2
3
4
5
$("#favicon")[0].href = "favicon.svg"
//или
$("#favicon").get(0).href = "favicon.svg"
//или
$("#favicon").eq(0).prop('href', "favicon.svg")

@Mailo · 30.10.2024, 15:28 **[ТС]**

Ага не заметил, спасибо. Всё заработало.
Ещё оказалось моя конструкция почемут не работала

JavaScript
1
$("#favicon")

ну хотяб

JavaScript
1
document.getElementById("favicon")

отработала.

Добавлено через 2 минуты
voraa, блин почаще надо страничку форума обновлять, быстрее бы косяк с $ нашёл, спасибо.

Добавлено через 2 часа 31 минуту
А как его в localStorage впихать с этим параметром href, вместо класса? Даже не знаю куда его пристроить и проверку на state тоже не понятно куда запихать?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//favicon
$(".hb_theme").click(function() {
  if ($(".wrapper").hasClass("dark")) {
    $(".favicon")[0].href = "favicon_dark.svg"
  }
  else if($(".wrapper").hasClass("light")) {
    $(".favicon")[0].href = "favicon.svg"
  }   
  const fav = "favicon.svg"
  localStorage.setItem('fav', fav)
}) 
 
const fav = localStorage.getItem('fav') ?? "favicon_dark.svg"
const fav_state = fav === "favicon.svg"
$(".favicon")[0].href = ("favicon.svg", fav_state)
$(".favicon")[0].href = ("favicon_dark.svg", !fav_state)

@barabar · 30.10.2024, 15:44

Примерно так, если по умолчанию светлая тема

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//favicon
$(".hb_theme").click(function() {
  if ($(".wrapper").hasClass("dark")) {
    $(".favicon")[0].href = "favicon_dark.svg"
    localStorage.setItem('fav', 'dark')
 
  }
  else if($(".wrapper").hasClass("light")) {
    $(".favicon")[0].href = "favicon.svg"
    localStorage.setItem('fav', 'light')
  }     
  
}) 
 
const fav = localStorage.getItem('fav') ?? "light"
if(fav==='light')$(".favicon")[0].href = "favicon.svg"
else $(".favicon")[0].href = "favicon_dark.svg"

Добавлено через 1 минуту
И если айди favicon заменил на такой же класс)

@Mailo · 30.10.2024, 15:55 **[ТС]**

О как, то что надо, оказывается я ещё вариантам условий кавычки зря ставлю, можно и без них оказывается.

@barabar · 30.10.2024, 15:58

Сообщение от Mailo

О как, то что надо, оказывается я ещё вариантам условий кавычки зря ставлю, можно и без них оказывается.

Если это про фигурные кавычки, то в одну строку можно и без них. Если не ошибаюсь, так во всех си-подобных языках. Вернее, не в одну строку, а в одно выражение)

krvsa · 30.10.2024, 16:22

Сообщение от barabar

JavaScript
1
2
if(fav==='light')$(".favicon")[0].href = "favicon.svg"
else $(".favicon")[0].href = "favicon_dark.svg"

Вот так лаконичнее

JavaScript
1
$(".favicon")[0].href = fav==='light' ? "favicon.svg" : "favicon_dark.svg"

Добавлено через 2 минуты
Или вообще вот так...

JavaScript
1
$(".favicon")[0].href = `favicon${fav==='light' ? '' : '_dark'}.svg`

@voraa · 30.10.2024, 17:45

А зачем лишнее значение в localStorage?
У вас уже вроде было значение для темы them в localStorage? Почему его не использовать, оно же тоже самое.

@Mailo · 30.10.2024, 19:41 **[ТС]**

Да у меня тут уже коллекция из 3х, да пускай будет, вдруг отключить что то надо по быстрому. Там вроде в два разных ключа лезут значения, что может пойти нитак.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//theme swap
setTimeout(() => {
  $('body').show();
}, 0);
 
$(".hb_theme").click(function() {  
  $('.wrapper').toggleClass('light').toggleClass('dark')  
  const theme = $('.wrapper').hasClass('light')? 'light' : 'dark'
  localStorage.setItem('theme', theme)        
})
const theme = localStorage.getItem('theme') ?? 'light'
const state = theme === 'light'
$('.wrapper').toggleClass('light', state).toggleClass('dark', !state)
 
 
//favicon
$(".hb_theme").click(function() {
  if ($(".wrapper").hasClass("dark")) {
    $(".favicon")[0].href = "favicon_dark.svg"
    localStorage.setItem('fav', 'dark')
 
  }
  else if($(".wrapper").hasClass("light")) {
    $(".favicon")[0].href = "favicon.svg"
    localStorage.setItem('fav', 'light')
  }      
}) 
 
const fav = localStorage.getItem('fav') ?? "light"
if(fav==='light')$(".favicon")[0].href = "favicon.svg"
else $(".favicon")[0].href = "favicon_dark.svg"
 
 
//langs
$(".l_eng").click(function() {
  $('body').addClass('eng')  
  localStorage.setItem('lang', 'eng')
})  
$(".l_rus").click(function() {
  $('body').removeClass('eng') 
  localStorage.setItem('lang', 'ru')
}) 
 
const lang = localStorage.getItem('lang') ?? 'ru'
const lang_state = lang === 'eng'
$('body').toggleClass('eng', lang_state);

@barabar · 30.10.2024, 21:22

Сообщение от Mailo

вдруг отключить что то надо по быстрому.

Зачем этот избыточный код? А отключить можно просто закоментить строку.
Я по понятным причинам проверить не могу, но примерно так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(".hb_theme").click(function() {  
  $('.wrapper').toggleClass('light').toggleClass('dark')  
  const theme = $('.wrapper').hasClass('light')? 'light' : 'dark'
  localStorage.setItem('theme', theme) 
  $(".favicon")[0].href = theme==='light' ? "favicon.svg" : "favicon_dark.svg"
       
})
 
 
const theme = localStorage.getItem('theme') ?? 'light'
const state = theme === 'light'
$('.wrapper').toggleClass('light', state).toggleClass('dark', !state)
$(".favicon")[0].href = theme==='light' ? "favicon.svg" : "favicon_dark.svg"
 
 
//langs
$(".l_eng").click(function() {
  $('body').addClass('eng')  
  localStorage.setItem('lang', 'eng')
})  
$(".l_rus").click(function() {
  $('body').removeClass('eng') 
  localStorage.setItem('lang', 'ru')
}) 
 
const lang = localStorage.getItem('lang') ?? 'ru'
const lang_state = lang === 'eng'
$('body').toggleClass('eng', lang_state);

Новые блоги и статьи Все статьи Все блоги /
FPS контроллер с анимированными Y-Bot и 3D-звуком miniaudio (Box3D, Recast, BehaviorTree.CPP, ozz-animation, ImGui, OpenGL и SDL3) 8Observer8 18.10.2026 Содержание блога \| English Version Полное мультиплатформенное руководство по стартовому проекту с FPS-контроллером игрока, анимированными роботами Y-Bot с 4-слойным блендингом, 3D-физикой Box3D,. . .	Локальный http сервер Argus19 17.10.2026 Локальный http сервер На работе, на двух локальных компьютерах круглосуточно работают программы опроса приборов с записью в книги Excel,которые раз в сутки записываются на сервер компании. Т. к. . . .	Копировать Windows на новый диск на UEFI damix 17.10.2026 https:/ / uriesk. wordpress. com/ 2016/ 11/ 01/ move-window-10-to-ssd-on-a-uefi-dualboot-system-with-basic-linux-tools/ TL DR Вставляем диск, а старый подключаем через переходник, грузимся с лайва. . .	ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .
Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	30.10.2024, 15:55 [ТС]
	О как, то что надо, оказывается я ещё вариантам условий кавычки зря ставлю, можно и без них оказывается. 0

@voraa 1305 / 1321 / 193 Регистрация: 21.01.2024 Сообщений: 6,092
	30.10.2024, 17:45
	А зачем лишнее значение в localStorage? У вас уже вроде было значение для темы them в localStorage? Почему его не использовать, оно же тоже самое. 0