如何在不使用 Amino 的情况下使用 tampermonkey 编辑 live css：Live CSS Editor

Question

我想知道是否可以使用 javascript 创建一个 Tampermonkey 脚本来查找并替换现有的 html 或 css 元素。

在我的例子中，我想将它添加到域 google.com 的 css 元素中，以将显示更改为 none:

    #tvcap {
        display: none;
    }

这可以防止我看到烦人的广告。我用的是 Pi-hole，所以此时它们只占用了我屏幕上的 space。

我安装了 Amino: Live CSS Editor chrome 扩展程序并且运行良好。我只需要使用这 3 行代码，但我更愿意将 Tampermonkey 与 JS 脚本一起使用。

示例：

之前：

之后：

Answer 1

真是个好主意。

您不能按照您的方式直接更改 CSS。

您需要通过 getElementById 查找使用 ID 的元素并更改 HTML 元素的样式属性

对于您的情况，最简单的代码是：

document.getElementById("tvcap").style.display = "none";

丹妮尔

Answer 2

这有效。

// ==UserScript==
// @name         Block google ads
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You, credit: https://whosebug.com/users/5053475/daniele-rugginenti
// @match        https://*/*
// @grant        none
// ==/UserScript==



(function() {
    'use strict';

    document.getElementById("tvcap").style.display = "none";
})();

Answer 3

您可以像这样使用一个简单的效用函数：

function addStyle(styleText){
    let s = document.createElement('style')
    s.appendChild(document.createTextNode(styleText))
    document.getElementsByTagName('head')[0].appendChild(s)
}

使用模板字符串格式，现在很容易添加css:

addStyle(`
  body{
    color:red;
  }
`)

如何在不使用 Amino 的情况下使用 tampermonkey 编辑 live css：Live CSS Editor

How do I edit live css using tampermonkey without using Amino: Live CSS Editor

javascript

html

css

tampermonkey

之前：

之后：