如何通过单击按钮隐藏CSS元素

Question

我正在构建一个Chrome Web扩展，点击按钮即可隐藏Youtube主页的部分内容。

在点击Chrome扩展的弹出窗口上的按钮后，我试图在网页加载后隐藏CSS元素。

由于chrome的安全协议，我不能使用内联CSS，必须使用javascript。

当我点击弹出窗口上的按钮时，我收到以下错误：；未捕获的类型错误：无法读取null的属性(读取"addEventListener"(">

HTML:

<button id="hideRecommended">Hide Recommended</button>

Javascript：

let homePage = document.querySelector(".style-scope.ytd-rich-grid-renderer#primary");
document.querySelector(".hideRecommended").addEventListener("click",showHideHomePage);
function showHideHomePage(){
homePage.style.display="none";
}

我不确定我做错了什么。如有任何意见，我们将不胜感激。感谢您阅读

Answer 1

由于id对按钮的定义如下

<button id="hideRecommended">Hide Recommended</button>

所以改变

document.querySelector(".hideRecommended").addEventListener("click",showHideHomePage);

至

document.querySelector("#hideRecommended").addEventListener("click",showHideHomePage);

注：

• .hideRecommended测量由class选择
• #hideRecommended表示按id选择