Блог

Главная - Вопросы по программированию - Как изменить цвет кнопки «Нравится» на Youtube?

Как изменить цвет кнопки «Нравится» на Youtube?

#javascript #html #css #youtube #console

Вопрос:

Проблема

Я пытаюсь изменить цвет кнопки «Нравится» в Youtube с цвета по умолчанию на синий:

https://i.imgur.com/xmsDFZK.png

Мне легко удалось сделать это с помощью инструментов разработчика браузера:

https://i.imgur.com/P6snS2p.png

через консоль

Однако сейчас я пытаюсь сделать это программно, например, через консоль. Но я не уверен, что именно нужно туда вставить, чтобы правильно идентифицировать кнопку «Нравится».

Я попробовал следующее, но это не сработало, это вообще не возымело никакого эффекта:

 document.querySelector('.style-scope .ytd-toggle-button-renderer')
    .querySelector(".style-scope .yt-icon")
    .getElementsByTagName("path")[0]
    .style.color = "blue"

Как правильно идентифицировать кнопку «Нравится» и изменить ее цвет?

Подробные сведения

Кнопка «Мне нравится», по-видимому, закодирована следующим образом:

 <yt-icon-button id="button" class="style-scope ytd-toggle-button-renderer style-text" touch-feedback="">
    <button id="button" class="style-scope yt-icon-button" aria-label="Ich mag das Video (wie 11.598.005 andere auch)" aria-pressed="false">
        <yt-icon class="style-scope ytd-toggle-button-renderer">
            <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon">
                <g class="style-scope yt-icon">
                    <path ...>...</path>
                </g>
            </svg>
        </yt-icon>
    </button>
    <yt-interaction id="interaction" class="circular style-scope yt-icon-button">
        <div class="stroke style-scope yt-interaction">
        </div>
        <div class="fill style-scope yt-interaction">
        </div>
    </yt-interaction>
</yt-icon-button>

Где собственно кнопка, которую я хочу изменить, находится в этой строке здесь

 <yt-icon class="style-scope ytd-toggle-button-renderer">

Я использую последнюю версию Firefox (91.0.2), настольную версию.

Комментарии:

1. Попробуйте документ. Селектор запросов(‘*[метка aria^=»нравится»] > значок yt >> svg’)

2. это не работает для меня

Ответ №1:

Youtube может изменить макет в зависимости от различных факторов. В Firefox это, похоже, работает:

 document.querySelectorAll('#menu-container #top-level-buttons-computed #button > yt-icon > svg > g > path')[0].style.color="blue";

Комментарии:

1. а если я захочу сделать его синим, только если видео понравится? как бы вы это сделали?

2. Я вижу, что атрибут aria-pressed становится истинным, когда видео нравится. Вам придется прислушиваться к событиям, которые вызывают изменение, и соответствующим образом настраивать цвет.

Ответ №2:

Попробуй вот так

 document.querySelector('.style-scope > .yt-icon > path")[0]
Метки: