Javascript 使用Chrome控制台JS&；更改Youtube视频页面；CSS

我想知道是否可以使用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是未定义的

。这是一个问题，因为我无法在控制台中使用jQuery

我怎么能在每次加载youtube页面时都运行它呢

---

谢谢

正如rism所提到的，如果您必须通过控制台并使用jQuery来执行此操作，那么您需要亲自将jQuery注入页面，因为Google不会在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函数，如

jQuery.find（'div'）

您仍然无法使用

$

，因为YouTube已经为

$

分配了不同的值

---

也就是说，我用它来做这类东西。这是一个谷歌浏览器的扩展，允许你添加自己的CSS到任何网站。它保存您的自定义CSS，并在您打开该网页时应用它

我个人使用它来删除不需要的谷歌广告div，并在我不拥有页面时修复页面布局问题（跳转的菜单等等）。我还使用它来定制我们的工作网站，如Atlassian Jira和Confluence。它对我很有效

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

单击CSS浏览器操作按钮

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

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

---

我不知道你的

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

---

Stylebot是一个chrome扩展，允许您将CSS应用于任何超级站点easy@DelightedD0D美好的你个人使用它吗？你是如何使用它的？你有什么目的？当然，因为

$（）。css

是

jquery

。要么在运行代码之前导入，要么只使用普通代码js@cwiggo我在下面添加了一个答案，以更好地解释我对Stylebot的使用。如果你仍然对jquery不起作用的原因很感兴趣，你能发布一个链接到你试图使用它的页面吗？@bleeted0d

$

并不意味着

jquery

，它只是用

jquery

代币来代替

$

<代码>$可以设置为任何值。打开youtube视频页面的源代码并搜索

jQuery

，您将无法找到它。