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

【问题标题】：How to change the color of the Youtube Like button?如何更改 Youtube Like 按钮的颜色？
【发布时间】：2021-11-02 08:43:53
【问题描述】：

问题

我正在尝试将 Youtubes Like-button 的颜色从默认颜色更改为蓝色：

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

通过控制台

但是，现在我尝试以编程方式执行此操作，例如通过 控制台。但我不确定要正确识别点赞按钮的确切内容。

我尝试了以下方法，但没有奏效，完全没有效果：

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

识别 Like 按钮并更改其颜色的正确方法是什么？

详情

Like 按钮的编码如下：

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

【问题讨论】：

试试 document.querySelector('*[aria-label^="like"] > yt-icon > svg')
它对我不起作用

标签： javascript html css youtube console

【解决方案1】：

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

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

【讨论】：

如果我想把它变成蓝色只是为了视频被喜欢？你会怎么做？
我看到属性 aria-pressed 在视频被点赞时变为 true。您必须侦听导致更改的事件并相应地设置颜色。

【解决方案2】：

这样试试

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

【讨论】：