javascript - 在Tampermonkey脚本中插入CSS的最佳方法是什么？

Question

我有一个Tampermonkey脚本，可在网站上运行供个人使用。它的主要功能是在服务器上运行ajax搜索，因此我不必手动进行搜索。
这就是为什么我使用脚本在他们的服务器上运行页面，而不是仅仅从头开始创建它的原因。我曾经遇到过许多跨站点限制问题。

// ==UserScript==
// @name         Ajax searcher
// @version      1
// @include      https://theirserver.com/?joeysquerystringhere
// @grant        GM_log
// @grant        GM_setClipboard
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @require      https://code.jquery.com/jquery-3.1.0.min.js
// ==/UserScript==

$("head").empty();
$("body").empty();
$("body").append (`

//All of my HTML is in here and working properly

                  `);


document.getElementById("myButton1").style.backgroundColor = "red";
document.getElementById("myButton2").style.backgroundColor = "red";
document.getElementById("myButton3").style.backgroundColor = "initial";

//All of my javascript is in here and working properly

GM_addStyle('td { padding: 5px; text-align: center; }');

var link = window.document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://www.w3schools.com/w3css/4/w3.css';
document.getElementsByTagName("HEAD")[0].appendChild(link);

我的CSS有点失控了。我有


$（'body'）。apend内的HTML标记内的内联样式
我有一些CSS正在用javascript编辑，如您所见，
我有GM_addStyle（''）
我也有参考w3网站的样式表


我认为真正重要的唯一一件事就是样式表，因为它具有我需要的w3类。我想知道我是否应该将所有内容都放在那里，还是一种方法优于另一种方法。只是我和一些为我工作的人正在使用它，因此它看起来不必令人难以置信，它只需要快速即可。 javascript具有一堆xmlhttpRequest，我需要尽可能快地工作。再慢几毫秒也是不可接受的。我的问题是在这种类型的脚本中构造CSS的最佳方法是什么？是我以前使用的方法
清空html页面并插入我自己可接受的页面？

Answer 1

尝试使用Key：value对，例如：

[
{
property: "propertyValue"
},
{
color: "red"
}
]

并使用诸如循环之类的样式来设置DOM元素。
优点：您为目标元素创建了小的可重用容器。