Javascript 小书签 getElementById - Youtube 视频页面，相关视频标题

Question

我正在寻找 youtube 视频页面的相关视频的标题元素。

这是我正在使用的 javascript，由于某种原因我无法让它工作。这是代码，

var span = document.getElementById('title').style;
if(span.font-size=='13')    {
document.cookie="VISITOR_INFO1_LIVE=-fntp2HbKFI;%20path=/;%20domain=.youtube.com"; 
window.location.reload();
}
else{
document.cookie="VISITOR_INFO1_LIVE=;%20path=/;%20domain=.youtube.com";
window.location.reload();
}

上面的代码在视频页面上打开 Youtube 实验，并在再次执行时关闭。

实验在视频页面上，它增加了相关视频标题的字体大小。它会在 cookie 值 (VISITOR_INFO1_LIVE) 设置为某个值时打开，然后重新加载页面。现在相关视频标题的字体大小从 13 px 增加到 19 px。

我无法使用 getElementById 获取该标题元素。登录到控制台时，错误是 get is TypeError: document.getElementById(...) is null。我什至对于元素 id 'list-video-item' 也得到了这个

然后再次执行代码，它会检查标题的字体大小是否为 19 像素。代码现在删除 cookie 值并再次重新加载页面，将字体大小设置回 13 像素。

代码在一个书签上，用于切换打开和关闭 Youtube 的新实验。

你可以阅读这个小实验here。

Answer 1

title 是一个类而不是一个 id，使用getElementsByClassName 来获取一个包含该类的所有元素的数组

var spans = document.getElementsByClassName('title');
if(spans.length){
    var spanStyle = spans[0].style;
    if(spanStyle.fontSize=='13')
    ...
    else
    ...
}