gpt4 book ai didi

javascript - 使用 JavaScript/Chrome 扩展过滤 HTML 元素

转载 作者:行者123 更新时间:2023-11-30 20:51:16 26 4
gpt4 key购买 nike

我目前正在制作一个 Chrome 扩展程序,所以我一直在练习它。我一直在尝试过滤关于 https://stackoverflow.com/ 的问题.首先,我想保持简单并简单地隐藏所有问题,然后一旦我开始工作,我只想过滤得分为负的帖子。

我的问题是简单隐藏所有问题的简单版本甚至无法正常工作。我不知道我做错了什么:

问题示例:

enter image description here '

我的manifest.json:

{
"manifest_version": 2,

"name": "Example",
"description": "This extension allows filter StackOverflow questions.",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}

我的popup.html:

<html>
<head>
<title>SO Filter</title>
<script src="popup.js"></script>
</head>
<body>
<h1>SO Filter</h1>
<button onclick="filter();">Filter!</button>
</body>
</html>

和我的popup.js:

function filter() {
var x = document.getElementsByClassName("question-summary narrow");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

我收到以下错误:

enter image description here

最佳答案

getElementsByClassName 返回元素的 HTMLCollection,这是一个类似数组的对象,包含具有指定类的所有元素。查看MDN reference .您正在使用此方法,就像它返回单个结果一样 - 要隐藏所有匹配的元素,您需要迭代结果:

function filter() {
var x = document.getElementsByClassName("question-summary narrow");

for (var i = 0; i < x.length; i++) {
var style = window.getComputedStyle(x[i]);

if (style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}

另请注意,要使其正常工作,样式必须在元素的开头内联,而不是在 CSS 中。否则,您将不得不检查它们的计算样式,哪个更昂贵。 现在包括在内。

关于javascript - 使用 JavaScript/Chrome 扩展过滤 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48153500/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com