如何使用 GreaseMonkey 脚本覆盖（css）元类属性？答案

【问题标题】：How do I override a (css) metaclass property using a GreaseMonkey script?如何使用 GreaseMonkey 脚本覆盖（css）元类属性？
【发布时间】：2014-10-17 23:03:30
【问题描述】：

我的目标是制作一个脚本，该脚本将删除 /r/avatar 中的扰流样式。

通过使用 Firefox 的“检查元素”元素功能，我设法在其中一张 CSS 表单中找到了代码，该代码使被剧透的标题变得透明。看起来是这样的

html:not([lang="ns"]) .thing.over18 a.title{
opacity:0.0
}

我一直在寻找一种方法来从greasemonkey 覆盖此属性，但我不确定如何。我是 javascript 新手：我一直在尝试使用

document.getElementsByClassName('.thing.over18')

尝试使用附加的（元？）类来抓取元素，但无论我如何使用类名，我都无法让它选择正确的元素（我有一个我没有使用的暗示现在正确的功能）。

实际上 userscripts.org 上有一个脚本做了类似的事情（unspoiler /r/pokemon），但似乎 userscripts 已经关闭，所以我无法查看它的来源。

【问题讨论】：

要应用自定义样式，您最好使用 stylish 之类的东西。但是给.thing.over18设置样式是不会有效果的，因为a.title已经设置好了样式
如何从greasemonkey 覆盖这种风格？我唯一能想到的就是a.css("opacity", "1")，但是把它放到脚本中是行不通的

标签： javascript css greasemonkey reddit tampermonkey

【解决方案1】：

在 CSS 或 HTML 中没有“元类”之类的东西。 .thing 是一个类选择器。 .over18 是另一个类选择器。你只有两个类选择器。

getElementsByClassName 只接受一个类名。

document.getElementsByClassName('thing')
document.getElementsByClassName('over18')

如果要使用选择器，请使用 querySelector（用于单个元素）或 querySelectorAll（用于 NodeList）。

document.querySelectorAll(".thing.over18");

【讨论】：

哎呀，我已经让我的 python 与我的网络一起逃跑了。我实际上并没有意识到“thing”和“over18”是两个不同的东西（可能是因为它们之间没有空格。”仅使用“over18”可以让我抓住正确的元素。现在正确设置它们的样式......
还有一个问题：我设法抓住了正确的（数量）元素。将它们记录到控制台会得到类似<div data-downs="?" data-ups="?" data-fullname="t3_2efnf3" onclick="click_thing(this)" class=" thing id-t3_2efnf3 over18 even link "> 的信息。它们似乎没有opacity 属性，如上面样式表中设置的那样。知道为什么会这样吗？
opacity 是 CSS 属性，而不是 HTML 属性。
事后想通了；通过从拥有它的元素中剥离 over18 类，我实际上已经取得了一些成功。我说“一些”是因为它看起来非常不一致。 The script 成功解除了the intended page 上的一些帖子，但似乎无法触及其他帖子。在相关页面上运行脚本会给我this output in the console。你能试试这个脚本，让我了解一下出了什么问题吗？
@pipsqueaker117：您可能正在使用现代浏览器，因此您可能可以依赖document.querySelectorAll 和node.classList。试试：[].slice.call(document.querySelectorAll(".over18")).forEach(function (el) { el.classList.remove("over18"); });