如何更改 Youtube Like 按钮的颜色？

Question

问题

我正在尝试将 Youtube 点赞按钮的颜色从默认颜色更改为蓝色：

我使用浏览器开发工具轻松地做到了：

通过控制台

但是，现在我正在尝试以编程方式进行，例如通过 控制台 。但是我不确定到底要放什么才能正确地识别点赞按钮。

我尝试了以下但没有用，完全没有效果：

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) 桌面版。

Answer 1

这样试试

document.querySelector('.style-scope > .yt-icon > path")[0]

Answer 2

Youtube 可能会根据各种因素更改布局。在 Firefox 上这似乎有效：

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

如何更改 Youtube Like 按钮的颜色？

How to change the color of the Youtube Like button?

javascript

html

css

youtube

console

问题

通过控制台

详情