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

@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);

Новые блоги и статьи Все статьи Все блоги /
[golang] Конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. alhaos 10.06.2026 Задача Реализовать конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. Сигнатура func Fetch(urls string, maxConcurrent int) Result Пример urls :=. . .	[golang] Состояние гонки (race condition) alhaos 10.06.2026 Состояние гонки (race condition) Состояние гонки (Race Condition) — это ошибка, возникающая при одновременном доступе нескольких горутин к одним и тем же данным без должной синхронизации. При этом. . .	Взрослые отношения, и почему они не получаются kumehtar 09.06.2026 Когда в детстве ребёнок не получает от родителей чего-то важного, он лишается не просто приятных переживаний, а основы для формирования определённых внутренних качеств и навыков. Если ребёнок не. . .	[golang] Worker Pool alhaos 09.06.2026 Worker Pool Worker Pool — паттерн конкурентной обработки задач в Go. Суть: фиксированное количество горутин-воркеров читают задачи из общего канала и пишут результаты в общий канал результатов. . . .
[golang] Pipeline alhaos 08.06.2026 Pipeline Pipeline — паттерн конкурентной обработки данных в Go. Суть: данные проходят через цепочку независимых стадий, каждая из которых работает в своей горутине и общается с соседями через. . .	Свет внутри себя kumehtar 07.06.2026 Пусть это будет здесь lIs4oanZS9Y	Программа для com-порта Uhbif79 05.06.2026 Всем привет, давно хотел изучить Qt, начинал, бросал, потом снова начинал. И сейчас вот смог написать свою первую программу. До этого имел опыт программирования микроконтроллеров, писал прошивки на. . .	Транскрипция 55-минутного видео через Whisper: WhisperDesktop облажался, спас Google Colab[ anaschu 01.06.2026 Понадобилось получить текст из свежезагруженного видео на YouTube. Казалось бы, задача на пять минут. Заняла полтора часа. Делюсь опытом — может кому пригодится последовательность решений. . . .

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

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