Question

我想知道我是否可以使用Google Chrome控制台调整网页上某些html元素的样式。

我在youtube上观看播客。而且我讨厌youtube在播客时间表中提出相关视频的事实（我试图赶上）。我想在网站上调整几种元素样式。

我想要实现的是每次加载YouTube视频页面时运行以下代码：

function youtubeVideoPageLoad()
{
    youtubeFunction();
    $('body').on('transitionend', function(event)
    {
        if (event.target.id != 'progress') return false;

        $('#watch7-sidebar-contents').remove();
        $('.html5-main-video').css("width","auto");
        $('.html5-main-video').css("height","auto");
        $('.player-height').css("height","720px");
        $('.ytp-chrome-bottom').css("width","100%");
        youtubeFunction();
    });
}

$(youtubeVideoPageLoad);

这将删除建议的视频，并使视频和子内容更大。对我来说更好。

我如何才能实现这一目标，因为我得到.css is undefined。这是一个问题，因为我无法在控制台中使用jQuery。

每次加载youtube页面时我怎么能运行它？

由于

Answer 1

正如rism所提到的，如果你必须通过控制台和使用jQuery这样做，你需要自己将jQuery自己注入页面，因为谷歌不在YouTube页面上使用jQuery。

以下是：

var script=document.createElement('script');
script.src='https://code.jquery.com/jquery-latest.min.js';
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);

然后你可以使用像jQuery.find('div')这样的jQuery函数。

您仍然无法使用$，因为YouTube已经为$分配了不同的值。

那就是说，我使用Stylebot来表示这类东西。它是一个Google Chrome扩展程序，允许您将自己的CSS添加到任何网站。它会保存您的自定义CSS，并在您打开该网页时随时应用它。

我个人用它来删除不需要的谷歌广告div并修复页面布局问题，当我不拥有页面时（跳跃菜单和什么不是）。我也用它来定制我们的工作网站，如Atlassian Jira和Confluence。它对我来说效果很好。

安装后，有几种方法可以使用它。最简单的是......

点击CSS浏览器操作按钮

点击弹出式菜单底部的“编辑CSS”按钮

在提供的框中编写自定义CSS，然后点击“保存”

Answer 2

我不知道你的youTubeFunction应该代表什么，所以我希望你这样做。根据评论，$可能并不代表YouTube上的jQuery，这是console.log($)输出支持的结论。所以最好的选择是使用如下的普通javascript或将其压缩成一行：

function youtubeVideoPageLoad()
{
    youtubeFunction();
    var uBody = document.getElementsByTagName('body')[0];
    uBody.addEventListener('transitionend', ytCustomizer);
}

function ytCustomizer(event)
    {
        if (event.target.id != 'progress') return false;
        document.getElementById('watch7-sidebar-contents').style.display='none';
        var vid = document.getElementsByClassName('html5-main-video')[0];
        vid.style.width='auto';
        vid.style.height='auto';
        document.getElementsByClassName('player-height')[0].style.height= "720px";
        document.getElementsByClassName('ytp-chrome-bottom')[0].style.width= "100%";
        youtubeFunction();
    });

youtubeVideoPageLoad();

使用Chrome控制台JS＆amp; amp;改变Youtube视频页面CSS

2 个答案: